ReactJS UI Ant Design DatePicker Component

Last Updated : 01 Jun, 2021

Ant Design Library has this component pre-built, and it is very easy to integrate as well. DatePicker Component is used to select a date from a popup panel when the user clicks on the input box. We can use the following approach in ReactJS to use the Ant Design DatePicker Component.

Common API:

allowClear: It is used to indicate whether allow clearing text or not.
autoFocus: It is used to get the focus when component mounted if this is set to true.
bordered: It is used to indicate whether it has border style or not.
className: It is used to pass the className of picker.
dateRender: It is used as the custom rendering function for date cells.
disabled: It is used to determine whether the DatePicker is disabled or not.
disabledDate: It is used to specify the date that cannot be selected.
dropdownClassName: It is used to customize the className of the popup calendar.
getPopupContainer: It is used to set the container of the floating layer.
inputReadOnly: It is used to set the read-only attribute of the input tag.
locale: It is used for the localization configuration.
mode: It is used to denote the picker panel mode.
open: It is used to denote the open state of the picker.
panelRender: It is used to customize panel render.
picker: It is used to set picker type date.
placeholder: It is used to denote the placeholder of date input.
popupStyle: It is used to customize the style of the popup calendar.
size: It is used to determine the size of the input box.
style: It is used to customize the style of the input box.
suffixIcon: It is used for the custom suffix icon.
onOpenChange: It is a callback function that can be triggered when the popup calendar is popped up or closed.
onPanelChange: It is a callback function that is triggered when picker panel mode is changed.

DatePicker Props:

defaultPickerValue: It is used to set the default picker date.
defaultValue: If start time or end time is null or undefined, it is used to set the default date.
disabledTime: It is used to specify the time that cannot be selected.
format: It is used to set the date format.
renderExtraFooter: It is used to render extra footer in the panel.
showNow: It is used to indicate whether to show the ‘Now’ button on the panel when showTime is set.
showTime: It is used to provide an additional time selection object.
showTime.defaultValue: It is used to set the default time of the selected date.
showToday: It is used to indicate whether to show the Today button.
value: It is used to set a date.
onChange: It is a callback function that is triggered when the selected time is changing.
onOk: It is a callback function that is triggered when clicking the ok button.
onPanelChange: It is a callback function that is triggered for panel changing.

DatePicker[picker=year] Props:

defaultPickerValue: It is used to set the default picker date.
defaultValue: It is used to set the default date.
format: It is used to set the date format.
renderExtraFooter: It is used to render extra footer in the panel.
value: It is used to set a date.
onChange: It is a callback function that is triggered when the selected time is changing.

DatePicker[picker=quarter] Props:

defaultPickerValue: It is used to set the default picker date.
defaultValue: It is used to set the default date.
format: It is used to set the date format.
renderExtraFooter: It is used to render extra footer in the panel.
value: It is used to set a date.
onChange: It is a callback function that is triggered when the selected time is changing.

DatePicker[picker=month] Props:

defaultPickerValue: It is used to set the default picker date.
defaultValue: It is used to set the default date.
format: It is used to set the date format.
monthCellRender: It is used for the custom month cell content render method.
renderExtraFooter: It is used to render extra footer in the panel.
value: It is used to set a date.
onChange: It is a callback function that is triggered when the selected time is changing.

DatePicker[picker=week] Props:

defaultPickerValue: It is used to set the default picker date.
defaultValue: It is used to set the default date.
format: It is used to set the date format.
renderExtraFooter: It is used to render extra footer in the panel.
value: It is used to set a date.
onChange: It is a callback function that is triggered when the selected time is changing.

Methods:

blur(): This method is used to remove the focus.
focus(): This method is used to get the focus.

RangePicker Props:

allowEmpty: It is used to allow start or end input leave empty.
dateRender: It is used to customize the date cell.
defaultPickerValue: It is used to set the default picker date.
defaultValue: It is used to set the default date.
disabled: It is used to indicate whether to disable start or end or not.
disabledTime: It is used to specify the time that cannot be selected.
format: It is used to set the date format.
ranges: It is used for the preset ranges for quick selection.
renderExtraFooter: It is used to render extra footer in the panel.
separator: It is used to set separator between inputs.
showTime: It is used to provide an additional time selection.
showTime.defaultValue: It is used to set the default time of the selected date.
value: It is used to set a date.
onCalendarChange: It is a callback function that is triggered when the start time or the end time of the range is changing.
onChange: It is a callback function that is triggered when the selected time is changing.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install antd
```

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css"; 
import { DatePicker } from 'antd'; 
  
export default function App() { 
  
  return ( 
    <div style={{ 
      display: 'block', width: 700, padding: 30 
    }}> 
      <h4>ReactJS Ant-Design DatePicker Component</h4> 
      <> 
        <DatePicker onChange={(date) => console.log(date)} />, 
      </> 
    </div> 
  ); 
}