ReactJS UI Ant Design DatePicker Component

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 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 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
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>  );}
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/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components
ReactJS setState()
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?