How to add mask in antd datepicker reactjs

Question

I want to add mask in the antd datepicker and also validate it as correct date format like dd/mm/yy this format

This is the code I've tried

<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's Date Picker doesn't provide a convenient way to add a mask to its input element (at least until v4.x), so we need to access its internal API.

Here is a workaround (with imask) that applies a mask and reformats the date while users type it in to avoid the need to add //-.

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

Answer 2

EN-US - dd/mm/yyyy CodeSandbox

EN-GB - mm/dd/yy CodeSandbox

this if else is not most beautiful, but is as you wished

import React, { useState, useCallback, useRef, useMemo } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "./styles.css";

export default function App() {
  const [date, setDate] = useState(new Date());

 const isLeapYear = useCallback(year => {
    return !((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0)
 }, [])

 const format = useCallback((val) => {
    if(!val) return "";
    const len = val.length;
    if (len === 1 && !["0", "1", "2", "3"].includes(val[0])) {
        return "";
    } else if (
        (len === 2 && val[0] === "3" && !["0", "1"].includes(val[1])) ||
         val.substr(0, 2) === "00"
    ) {
        return val.substr(0, 1);
    } else 
    
    if (len === 3) {
        if (val[2] === "/") {
            return val.substr(0, 2);
        } else if (["0", "1"].includes(val[2])
        ) {
            return val.substr(0, 2) + "/" + val.substr(2);
        } else {
            return val.substr(0, 2);
        }
    } else if (
        len === 5 &&
        (val.substr(3, 5) === "00" ||
        (val[3] === "1" && !["0", "1", "2"].includes(val[4])) ||
        (["30","31"].includes(val.substr(0, 2)) && val.substr(3, 5) === "02")||
        (val.substr(0, 2) === "31"  &&
            !["01", "03", "05", "07", "08", "10", "12"].includes(val.substr(3, 5)))
        )
    ) {
        return val.substr(0, 4);
    } else if (len === 6) {
        if (val[5] === "/") {
            return val.substr(0, 5);
        } else {
            return val.substr(0, 5) + "/" + val.substr(5);
        }
    }  else if (len === 8 && val.substr(0, 6) === "29/02/") {
        let year = +val.substr(6);
        year = year > 1970 ? 1900 + year : 2000 + year;
        if (isLeapYear(year)) {
            return val.substr(0, 7);
        }
    } else  if (len > 8) {
        return val.substr(0, 8);
    }
    return val;
  }, [isLeapYear]);

  
  const onChangeRaw = useCallback((e) => {
    e.target.value = format(e.target.value);
  }, [format]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DatePicker
        dateFormat="dd/MM/yy"
        //locale="en-GB"
        onChange={setDate}
        onChangeRaw={onChangeRaw}
        selected={date}
        suffixIcon={<span className="icon-calendar datepicker-block"></span>}
        placeholder="mm/dd/yy"
      />
    </div>
  );
}

Answer 3

Good one, but antd-lib datepicker has no such API as onChangeRaw