antd#DatePicker TypeScript Examples

InlineDatePicker: React.FC<DatePickerProps> = React.forwardRef<
  React.Component,
  DatePickerProps
>((props, ref) => {
  const refContainer = useRef<HTMLDivElement>(null);
  const refPicker = useRef<HTMLDivElement>(document.createElement("div"));

  useLayoutEffect(() => {
    if (refContainer.current) {
      refContainer.current.appendChild(refPicker.current);
    }
  }, []);

  return (
    <I18nextProvider i18n={i18next}>
      <div ref={refContainer} className="ant-ext-sd__inlinePicker">
        <DatePicker
          {...props}
          ref={ref}
          open
          inputReadOnly
          getPopupContainer={() => refPicker.current}
        />
      </div>
    </I18nextProvider>
  );
})

render() {
        return (
            <Form className="ui-background" onFinish={this.onFinish}>

                <Form.Item name='assetName' label='资产方名称' rules={[{ required: true }]}>
                    <Input />
                </Form.Item>

                <Form.Item name='contract' label='签约主体' rules={[{ required: true }]}>
                    <Input />
                </Form.Item>

                <Form.Item name='contractDate' label='签约时间' rules={[{ required: true }]}>
                    <DatePicker showTime />
                </Form.Item>

                <Form.Item name='contacts' label='联系人'>
                    <Input />
                </Form.Item>

                <Form.Item name='contactsPhone' label='联系电话' rules={[{ pattern: Rules.phone, message: '无效' }]}>
                    <Input maxLength={11} />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit"> 提交 </Button>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" onClick={e => window.history.back()}> 取消/返回 </Button>
                </Form.Item>

            </Form>
        )
    }

{ RangePicker } = DatePicker

render() {
    const { className, value, defaultPickerValue, defaultValue, style, ...props } = this.props
    return (
      <DatePicker.RangePicker
        {...props}
        defaultPickerValue={this.getValue(defaultPickerValue)}
        defaultValue={this.getValue(defaultPickerValue)}
        value={this.getValue(value)}
        onChange={this.onChange}
        style={{ ...style, width: "100%" }}
        className={classnames('gant-calendar-picker', className)} />
    )
  }

Field = styled(DatePicker)`
  color: ${(props: Props) => props.design.colors.answer};
  border-color: ${(props: Props) => props.design.colors.answer};
  background: none !important;
  border-right: none;
  border-top: none;
  border-left: none;
  border-radius: 0;
  width: 100%;

  :hover,
  :active {
    border-color: ${(props: Props) => props.design.colors.answer};
  }

  &.ant-picker {
    box-shadow: none;
  }

  .ant-picker-clear {
    background: none;
  }

  input {
    color: ${(props: Props) => props.design.colors.answer};

    ::placeholder {
      color: ${(props: Props) => transparentize(0.6, props.design.colors.answer)};
    }
  }

  .anticon {
    color: ${(props: Props) => props.design.colors.answer};
  }
`

TableInput: React.FC<TableInputProps> = (props) => {
  const {defaultValue} = props
  const [value] = useState(defaultValue)

  const renderInput = () => {
    if(props.name === 'birthday') {
      return <DatePicker/>
    }
    return <Input value={value} placeholder={'请输入'}/>
  }

  return <div className={styles.tableInput} style={{height:'100%'}}>
      <Form.Item name={props.name}>
        {renderInput()}
      </Form.Item>
    </div>

}

function createQuestionField({question, updateQuestion}: any) {
  switch (question.type) {
    case 'SingleChoice':
      const options = question.options || [];
      return SingleChoiceQuestionField({question, updateQuestion, options});
    case 'Date':
      return (
        <DatePicker
          defaultValue={moment('2015/01/01', dateFormat)}
          format={dateFormat}
          disabled
        />
      );
    case 'Rating':
      let count = question.count || 3;
      return (
        <>
          <p>Maximum rating</p>
          <Radio.Group
            options={['3', '5', '10']}
            value={count}
            onChange={e => {
              count = e.target.value;
              updateQuestion({...question, count: e.target.value});
            }}
          />
          <Rate count={count} allowHalf />
        </>
      );
    case 'Text':
      return (
        <Input.TextArea placeholder="Short answer here" allowClear disabled />
      );
    case 'NetPromoterScore':
      return <NetPromoterScore disabled />;
  }
}

ExactTimeSelector: FC<
  {
    time?: TimeFilterConditionValue;
    onChange: (time) => void;
  } & I18NComponentProps
> = memo(({ time, i18nPrefix, onChange }) => {
  const t = useI18NPrefix(i18nPrefix);

  const handleMomentTimeChange = momentTime => {
    const timeStr = formatTime(momentTime, TIME_FORMATTER);
    onChange?.(timeStr);
  };

  return (
    <DatePicker
      showTime
      value={moment(time as string)}
      onChange={handleMomentTimeChange}
      placeholder={t('select')}
    />
  );
})

// 注册区间日期
registerField('date-range', {
  type: 'data-range',
  defaultValue: [],
  render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
    let text = getFieldValue(field.key)
    if (text) {
      text = text.join('\n')
    }
    return readonly ? (
      <span className="ay-form-text">{text || '-'}</span>
    ) : (
      <DatePicker.RangePicker
        ranges={ranges}
        placeholder={['开始日期', '结束日期']}
        className="max-width"
        {...field.props}
      />
    )
  }
})

TimePoint: React.FC<TimePointProps> = ({value, placeholder, setValue}) => {
    let m;
    if (value && value > 0) {
        m = moment.unix(value)
    }

    return <div>
        <DatePicker
            style={{width: "100%"}}
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            value={m}
            placeholder={placeholder || "设置时间点"}
            onChange={e => setValue && e && setValue(e.unix())}
        />
    </div>
}

render() {
        const {form, startVal, extraSeparation, label, endVal, DeleteNode} = this.props;
        let {startKey, endKey} = this.props;
        const {startValue, endValue, endOpen} = this.state;

        const dateShowFormat = this.props.dateShowFormat || "YYYY-MM-DD HH:mm:ss";


        const wrapProps = {className: this.props.className};

        // 这个key在设置的时候可能会被删完  这里需要设置一个默认值
        startKey = startKey || getUUID();
        endKey = endKey || getUUID();


        return (
            <div {...wrapProps}>
                <div className="ant-form-item costom-date-range">
                    <FormItem colon={false} label={label}>
                        {form.getFieldDecorator(startKey, {
                            initialValue: startValue || (startVal && moment(startVal)) || undefined
                        })(<DatePicker
                            placeholder="开始时间"
                            format={dateShowFormat}
                            showTime
                            disabledDate={this.disabledStartDate}
                            onChange={this.onStartChange}
                            onOpenChange={this.handleStartOpenChange}
                            style={{
                                width: 300
                            }}/>)}

                    </FormItem>

                    <span className="center-hr"> {extraSeparation ? extraSeparation : '至'} </span>

                    <FormItem {...formItemLayout} colon={false}>
                        {form.getFieldDecorator(endKey, {
                            initialValue: endValue || (endVal && moment(endVal)) || undefined
                        })(<DatePicker
                            placeholder="结束时间"
                            format={dateShowFormat}
                            showTime
                            disabledDate={this.disabledEndDate}
                            onChange={this.onEndChange}
                            open={endOpen}
                            onOpenChange={this.handleEndOpenChange}
                            style={{
                                width: 300
                            }}/>)}
                    </FormItem>
                </div>
                {DeleteNode && <DeleteNode/>}
            </div>
        );
    }

export default function TaskDateCell({ task, programId, dateKey }) {
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
  const [showEdit, setShowEdit] = useState(false)
  const updateTaskMutation = useEditTaskMutation({
    programId,
    taskId: task.taskId,
    projectId: task.projectId,
  })
  return (
    <DateCell
      onFocus={() => setShowEdit(true)}
      onBlur={() => setShowEdit(false)}
      onMouseOver={() => setShowEdit(true)}
      onMouseOut={() => setShowEdit(false)}
      className="ant-table-cell"
      onClick={() => setIsDatePickerOpen(!isDatePickerOpen)}
      onKeyPress={() => setIsDatePickerOpen(!isDatePickerOpen)}
      tabIndex={task.taskId}
    >
      <Space>
        <span>
          {task[dateKey]
            ? dayjs(task[dateKey]).format('DD/MM/YYYY')
            : ''}
        </span>
        <CaretDownOutlined
          style={{
            visibility: showEdit ? 'visible' : 'hidden',
            top: 22,
          }}
        />
        <LoadingOutlined
          style={{
            position: 'absolute',
            visibility: updateTaskMutation.isLoading
              ? 'visible'
              : 'hidden',
            top: 22,
          }}
        />
      </Space>
      <DatePicker
        open={isDatePickerOpen}
        onOpenChange={(open) => setIsDatePickerOpen(open)}
        onChange={(date) => {
          if (date) {
            updateTaskMutation.mutate({
              [dateKey]: date?.toDate(),
            })
          }
        }}
      />
    </DateCell>
  )
}

{ RangePicker } = DatePicker

{ RangePicker, MonthPicker } = DatePicker

CustomTooltip = () => (
  <div>
    自定义 Tooltip <div>1</div>
    <div>2</div>
    <DatePicker.RangePicker getPopupContainer={(t) => t.parentElement} />
  </div>
)

DatetimePicker: React.FC<Props> = props => {
  const { className, style, disabled, value, onChange } = props
  const [innerValue, setInnerValue] = useState<moment.Moment | undefined>(
    value ? moment(value) : undefined,
  )
  const mountedRef = useRef<boolean>(false)

  useEffect(() => {
    if (!mountedRef.current) {
      mountedRef.current = true
      return
    }
    const valueMoment = moment(value)
    if (valueMoment.isValid()) {
      setInnerValue(valueMoment)
    }
  }, [value])

  const onChangeMoment = useCallback(
    (_: any, dateString: string) => {
      const nextMoment = moment(dateString)
      setInnerValue(nextMoment.isValid() ? nextMoment : undefined)
      if (typeof onChange === 'function') {
        onChange(nextMoment.isValid() ? nextMoment.format('YYYY-MM-DD HH:mm:ss') : '')
      }
    },
    [onChange],
  )

  return (
    <DatePicker
      showTime
      allowClear
      className={className}
      style={style}
      disabled={disabled}
      value={innerValue}
      onChange={onChangeMoment}
    />
  )
}

itemsType: YFormItemsType = {
  // 纯文本类
  input: { component: <Input />, formatStr: '请输入${label}' },
  password: { component: <Input.Password />, formatStr: '请输入${label}' },
  textarea: { component: <TextArea />, formatStr: '请输入${label}', modifyProps: textModify },
  money: { component: <Money />, formatStr: '请输入${label}', modifyProps: moneyModify },
  text: { component: <CustomTypography />, formatStr: '请输入${label}' },
  // 日期类
  datePicker: {
    component: <DatePicker />,
    formatStr: '请选择${label}',
    modifyProps: datePickerModify,
  },
  rangePicker: {
    component: <DatePicker.RangePicker />,
    formatStr: '请选择${label}',
    modifyProps: rangePickerModify,
  },
  // 单选复选类
  checkbox: { component: <Checkbox />, formatStr: '请选择${label}', modifyProps: checkboxModify },
  switch: { component: <Switch />, formatStr: '请选择${label}', modifyProps: switchModify },
  checkboxGroup: {
    component: <CheckboxGroup />,
    formatStr: '请选择${label}',
    modifyProps: checkboxGroupModify,
  },
  radio: { component: <Radio />, modifyProps: radioModify, formatStr: '请选择${label}' },
  select: {
    component: <Select {...searchSelect} />,
    formatStr: '请选择${label}',
    modifyProps: selectModify,
  },
  // 工具类
  oneLine: { component: <OneLine />, modifyProps: oneLineModify },
  card: { component: <Card /> },
  list: { component: <List />, hasFormItem: false },
  button: { component: <Button /> },
  secureButton: { component: <SecureButton /> },
  submit: { component: <Submit />, hasFormItem: false, modifyProps: submitModify },
  // 展示类
  custom: { modifyProps: CustomModify },
  view: { component: <ComponentView /> },
  space: { component: <Space />, modifyProps: SpaceModify },
}

export function ObjectAttrDate(props: ObjectAttrDateProps): React.ReactElement {
  const { t } = useTranslation(NS_FORMS);
  const [value, setValue] = React.useState<DateValueType>({
    default: "",
  });

  React.useEffect(() => {
    !isNil(props.value) && setValue(props.value);
  }, [props.value]);

  const handleValueChange = (value: Partial<DateValueType>) => {
    setValue(value);
    props.onChange && props.onChange(value);
  };

  return (
    <>
      <div>
        {i18n.t(`${NS_FORMS}:${K.FORMAT}`)}
        <Row>
          <Alert
            message="yyyy-mm-dd"
            type="info"
            className={styles.cmdbObjectAttrValueInfo}
          />
        </Row>
      </div>
      <div>
        {t(K.ATTRIBUTE_DEFAULT_VALUE)}
        <Row>
          {value?.default?.length ? (
            <DatePicker
              value={moment(value?.default)}
              placeholder={i18n.t(`${NS_FORMS}:${K.CLICK_TO_SELECT_DATE}`)}
              style={{ width: "100%" }}
              onChange={(date) =>
                handleValueChange({
                  ...value,
                  default: date?.format("YYYY-MM-DD"),
                })
              }
            />
          ) : (
            <DatePicker
              placeholder={i18n.t(`${NS_FORMS}:${K.CLICK_TO_SELECT_DATE}`)}
              style={{ width: "100%" }}
              onChange={(date) =>
                handleValueChange({
                  ...value,
                  default: date?.format("YYYY-MM-DD"),
                })
              }
            />
          )}
        </Row>
      </div>
    </>
  );
}

{ RangePicker: AntdRangePicker } = DatePicker

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

DateTimePicker = (props: IDateTimePicker) => {
  const {
    momentObj,
    setMomentObj,
    datePickerProps = {},
    timePickerProps = {},
  } = props;
  return (
    <>
      <DatePicker
        className="field-date"
        size="large"
        value={momentObj}
        onChange={value => {
          if (!value) return;
          if (!momentObj) return setMomentObj(value);

          const currentMoment = momentObj.clone();
          currentMoment.year(value.year());
          currentMoment.month(value.month());
          currentMoment.date(value.date());
          setMomentObj(currentMoment);
        }}
        {...datePickerProps}
      />
      <TimePicker
        className="field-date"
        size="large"
        value={momentObj}
        onChange={value => {
          if (!value) return;
          if (!momentObj) return setMomentObj(value);

          const currentMoment = momentObj.clone();
          currentMoment.hour(value.hour());
          currentMoment.minute(value.minute());
          currentMoment.second(value.second());
          setMomentObj(currentMoment);
        }}
        {...timePickerProps}
      />
    </>
  );
}

DateAdmin: React.FC<FieldAdminProps> = ({ field }) => {
  const { t } = useTranslation()

  return (
    <div>
      <Form.Item
        label={t('type:date.default')}
        name={[field.name as string, 'defaultValue']}
        labelCol={{ span: 6 }}
        getValueFromEvent={(e: Moment) => (e ? e.format('YYYY-MM-DD') : undefined)}
        getValueProps={(e: string) => ({ value: e ? moment(e) : undefined })}
      >
        <DatePicker format={'YYYY-MM-DD'} />
      </Form.Item>
      <Form.Item
        label={t('type:date.min')}
        name={[
          field.name as string,
          'optionKeys',
          'min',
        ]}
        labelCol={{ span: 6 }}
        getValueFromEvent={(e: Moment) => e.format('YYYY-MM-DD')}
        getValueProps={(e: string) => ({ value: e ? moment(e) : undefined })}
      >
        <DatePicker />
      </Form.Item>

      <Form.Item
        label={t('type:date.max')}
        name={[
          field.name as string,
          'optionKeys',
          'max',
        ]}
        labelCol={{ span: 6 }}
        getValueFromEvent={(e: Moment) => e.format('YYYY-MM-DD')}
        getValueProps={(e: string) => ({ value: e ? moment(e) : undefined })}
      >
        <DatePicker />
      </Form.Item>
    </div>
  )
}

TicketDeadlineField = ({ initialValues }) => {
    const intl = useIntl()
    const CompleteBeforeMessage = intl.formatMessage({ id: 'ticket.deadline.CompleteBefore' })
    const AutoCompletionMessage = intl.formatMessage({ id: 'ticket.deadline.AutoCompletion' })

    const { isSmall } = useLayoutContext()

    const isExistedTicket = get(initialValues, 'property')

    const [isAutoDetectedValue, setIsAutoDetectedValue] = useState<boolean>(!isExistedTicket)

    const handleTicketDeadlineChange = useCallback(() => {
        setIsAutoDetectedValue(false)
    }, [])

    return (
        <Row align={'bottom'} gutter={TICKET_DEADLINE_FIELD_ROW_GUTTER} justify={'space-between'}>
            <Col span={isSmall ? 24 : 11}>
                <TicketFormItem
                    label={CompleteBeforeMessage}
                    name={'deadline'}
                    required
                    initialValue={INITIAL_DEADLINE_VALUE}
                    data-cy={'ticket__deadline-item'}
                >
                    <DatePicker
                        format='DD MMMM YYYY'
                        onChange={handleTicketDeadlineChange}
                        disabledDate={isDateDisabled}
                        style={DATE_PICKER_STYLE}
                        allowClear={false}
                    />
                </TicketFormItem>
            </Col>
            {
                isAutoDetectedValue && (
                    <Col style={AUTO_DETECTED_DEADLINE_COL_STYLE} span={isSmall ? 24 : 11}>
                        <Row justify={'start'} align={'middle'} style={AUTO_DETECTED_DEADLINE_ROW_STYLE}>
                            <Col span={24}>
                                <Typography.Text type={'secondary'} style={AUTO_COMPLETE_MESSAGE_STYLE}>
                                    {AutoCompletionMessage}
                                </Typography.Text>
                            </Col>
                        </Row>
                    </Col>
                )
            }
        </Row>
    )
}

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

TimeRange: React.FC<TimeRangeProps> = (props: TimeRangeProps) => {
    const [start, setStart] = useState(props.start);
    const [end, setEnd] = useState(props.end);

    useEffect(() => {
        props.onStart && props.onStart(start || 0);
    }, [start]);

    useEffect(() => {
        props.onEnd && props.onEnd(end || 0);
    }, [end]);

    return <div className={"div-left"}>
        <Row>
            <Col span={12}>
                <div style={{marginRight: 4}}>
                    <DatePicker
                        style={{width: "100%"}}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        value={(start && start > 0) ? moment.unix(start) : undefined}
                        placeholder="点击这里设置开始时间"
                        onChange={e => {
                            e != null ? setStart(e.unix()) : setStart(undefined)
                        }}
                    />
                </div>
            </Col>
            <Col span={12}>
                <div style={{marginRight: 4}}>
                    <DatePicker
                        style={{width: "100%"}}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        value={(end && end > 0) ? moment.unix(end) : undefined}
                        placeholder="点击这里设置结束时间"
                        onChange={e => e != null ? setEnd(e.unix()) : setEnd(undefined)}
                    />
                </div>
            </Col>
        </Row>
    </div>
}

FromAdd: React.FC<{}> = props => {
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()

  const submitData = (values: any) => {
    setVisible(false)
    message.success('提交数据成功!!!')
    form.resetFields()
  }
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  }
  return (
    <>
      <Button
        onClick={() => setVisible(true)}
        size="large"
        type="primary"
        className="btn-bottom"
      >
        添加新数据
      </Button>
      <Modal
        title="提交数据"
        onCancel={() => setVisible(false)}
        visible={visible}
        footer={null}
      >
        <Form
          form={form}
          initialValues={{ ji: true, level: 2020 }}
          name="basic"
          onFinish={submitData}
          onFinishFailed={onFinishFailed}
          {...layout}
        >
          <Form.Item label="时间" name="time" rules={[{ required: true }]}>
            <DatePicker format="YYYY-MM-DD" />
          </Form.Item>
          <Form.Item label="赛事名称" name="title" rules={[{ required: true }]}>
            <Input placeholder="请输入赛事名称" />
          </Form.Item>
          <Form.Item label="赛事级别" name="ji" rules={[{ required: true }]}>
            <Radio.Group>
              <Radio value={true}>省赛</Radio>
              <Radio value={false}>校赛</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="年度" name="level" rules={[{ required: true }]}>
            <InputNumber max={2020} min={2010} />
          </Form.Item>
          <Form.Item label="学校" name="school" rules={[{ required: true }]}>
            <Input placeholder="请输入学校" />
          </Form.Item>
          <Form.Item label="地址" name="address" rules={[{ required: true }]}>
            <Input placeholder="请输入地址" />
          </Form.Item>
          <Form.Item label="描述信息" name="desc" rules={[{ required: true }]}>
            <Input placeholder="请输入描述信息" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button
                onClick={() => form.resetFields()}
                type="default"
                htmlType="reset"
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}