如何在antd datepicker Reactjs中添加掩码

Question

我想在 antd datepicker 中添加掩码，并将其验证为正确的日期格式，例如 dd/mm/yy 这种格式

这是我尝试过的代码

<FormItem label="Date of Birth">
{getFieldDecorator("dob", {rules: [{ required: true, message:"Please input the dob!" }]})(
  <DatePicker format="DD/MM/YY" getCalendarContainer={() => document.getElementById('dobParent')} onChange={handleChange} disabledDate={disabledDate} suffixIcon={<span className="icon-calendar datepicker-block"></span>} placeholder="dd/mm/yy"/>)}
</FormItem>

Answer 1

Ant Design 的日期选择器没有提供一种方便的方法来向其输入元素添加掩码（至少在 v4.x 之前），因此我们需要访问其内部 API。

这是一种解决方法（使用imask），它在用户输入日期时应用掩码并重新格式化日期，以避免需要添加// -。

import React from 'react'
import {
  DatePicker as AntdDatePicker,
  DatePickerProps as AntDatePickerProps,
} from 'antd'
import IMask from 'imask'
import moment from 'moment'

const DATE_FORMAT = 'MM/DD/YYYY'
const MASKED = IMask.createMask({
  blocks: {
    DD: {from: 1, mask: IMask.MaskedRange, to: 31},
    MM: {from: 1, mask: IMask.MaskedRange, to: 12},
    YYYY: {from: 1900, mask: IMask.MaskedRange, to: Number.MAX_VALUE},
  },
  format: (date: Date) => moment(date).format(DATE_FORMAT),
  mask: Date,
  parse: (date: string) => moment(date, DATE_FORMAT),
  pattern: DATE_FORMAT,
})

export type DatePickerProps = Omit<AntDatePickerProps, 'format' | 'picker' | 'onKeyDown'>

const DatePicker = (props: DatePickerProps) => (
  <AntdDatePicker
    format={DATE_FORMAT}
    onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
      const input = event.target as HTMLInputElement
      input.value = MASKED.resolve(input.value)
    }}
    picker="date"
    placeholder={DATE_FORMAT.toLowerCase()}
    {...props}
  />
)

export default DatePicker