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 therequiredmodule using the following command:
npm install antd
Project Structure: It will look like the following.
