ReactJS UI Ant Design DatePicker Component

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.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/date-picker/