Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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>
  );
}

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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!