DatePicker

To select or input a date.

When To Use#

By clicking the input box, you can select a date from a popup calendar.

Examples





Basic use case. Users can select or input a date in panel.

expand codeexpand code
import { DatePicker } from 'antd';

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <div>
    <DatePicker onChange={onChange} />
    <br />
    <DatePicker onChange={onChange} picker="week" />
    <br />
    <DatePicker onChange={onChange} picker="month" />
    <br />
    <DatePicker onChange={onChange} picker="quarter" />
    <br />
    <DatePicker onChange={onChange} picker="year" />
  </div>,
  mountNode,
);



We can set the date format by format.

expand codeexpand code
import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';

const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];

ReactDOM.render(
  <div>
    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
    <br />
    <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
    <br />
    <DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
    <br />
    <RangePicker
      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
      format={dateFormat}
    />
  </div>,
  mountNode,
);



A disabled state of the DatePicker. You can also set as array to disable one of input.

expand codeexpand code
import { DatePicker } from 'antd';
import moment from 'moment';

const { MonthPicker, RangePicker } = DatePicker;

const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
  <div>
    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
    <br />
    <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
    <br />
    <RangePicker
      defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
      disabled
    />
    <br />
    <RangePicker
      defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
      disabled={[false, true]}
    />
  </div>,
  mountNode,
);

A example shows how to select a dynamic range by using onCalendarChange and disabledDate.

expand codeexpand code
import React, { useState } from 'react';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

const App = () => {
  const [dates, setDates] = useState([]);
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
    return tooEarly || tooLate;
  };

  return (
    <RangePicker
      disabledDate={disabledDate}
      onCalendarChange={value => {
        setDates(value);
      }}
    />
  );
};

ReactDOM.render(<App />, mountNode);

We can customize the rendering of date cells in the calendar by providing a dateRender function to DatePicker.

expand codeexpand code
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

ReactDOM.render(
  <div>
    <DatePicker
      dateRender={current => {
        const style = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
    <RangePicker
      dateRender={current => {
        const style = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </div>,
  mountNode,
);




Set range picker type by picker prop.

expand codeexpand code
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

ReactDOM.render(
  <div>
    <RangePicker />
    <br />
    <RangePicker showTime />
    <br />
    <RangePicker picker="week" />
    <br />
    <RangePicker picker="month" />
    <br />
    <RangePicker picker="year" />
  </div>,
  mountNode,
);

This property provide an additional time selection. When showTime is an Object, its properties will be passed on to built-in TimePicker.

expand codeexpand code
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
  console.log('onOk: ', value);
}

ReactDOM.render(
  <div>
    <DatePicker showTime onChange={onChange} onOk={onOk} />
    <br />
    <RangePicker
      showTime={{ format: 'HH:mm' }}
      format="YYYY-MM-DD HH:mm"
      onChange={onChange}
      onOk={onOk}
    />
  </div>,
  mountNode,
);


Disabled part of dates and time by disabledDate and disabledTime respectively, and disabledTime only works with showTime.

expand codeexpand code
import moment from 'moment';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledDate(current) {
  // Can not select days before today and today
  return current && current < moment().endOf('day');
}

function disabledDateTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

function disabledRangeTime(_, type) {
  if (type === 'start') {
    return {
      disabledHours: () => range(0, 60).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    };
  }
  return {
    disabledHours: () => range(0, 60).splice(20, 4),
    disabledMinutes: () => range(0, 31),
    disabledSeconds: () => [55, 56],
  };
}

ReactDOM.render(
  <div>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      disabledTime={disabledDateTime}
      showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
    />
    <br />
    <DatePicker picker="month" disabledDate={disabledDate} />
    <br />
    <RangePicker disabledDate={disabledDate} />
    <RangePicker
      disabledDate={disabledDate}
      disabledTime={disabledRangeTime}
      showTime={{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }}
      format="YYYY-MM-DD HH:mm:ss"
    />
  </div>,
  mountNode,
);

We can set preset ranges to RangePicker to improve user experience.

expand codeexpand code
import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}

ReactDOM.render(
  <div>
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
      }}
      onChange={onChange}
    />
    <br />
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
      }}
      showTime
      format="YYYY/MM/DD HH:mm:ss"
      onChange={onChange}
    />
  </div>,
  mountNode,
);





The input box comes in three sizes. default will be used if size is omitted.

expand codeexpand code
import { DatePicker, Radio } from 'antd';

const { RangePicker } = DatePicker;

class PickerSizesDemo extends React.Component {
  state = {
    size: 'default',
  };

  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };

  render() {
    const { size } = this.state;
    return (
      <div>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
        <br />
        <br />
        <DatePicker size={size} />
        <br />
        <DatePicker size={size} picker="month" />
        <br />
        <RangePicker size={size} />
        <br />
        <DatePicker size={size} picker="week" />
      </div>
    );
  }
}

ReactDOM.render(<PickerSizesDemo />, mountNode);







Bordered-less style component.

expand codeexpand code
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

ReactDOM.render(
  <div>
    <DatePicker bordered={false} />
    <br />
    <DatePicker picker="week" bordered={false} />
    <br />
    <DatePicker picker="month" bordered={false} />
    <br />
    <DatePicker picker="year" bordered={false} />
    <br />
    <RangePicker bordered={false} />
    <br />
    <RangePicker picker="week" bordered={false} />
    <br />
    <RangePicker picker="month" bordered={false} />
    <br />
    <RangePicker picker="year" bordered={false} />
  </div>,
  mountNode,
);

API#

There are five kinds of picker:

  • DatePicker

  • MonthPicker

  • RangePicker

  • WeekPicker

  • YearPicker

  • QuarterPicker (Added in 4.1.0)

Localization#

The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: ConfigProvider.

If there are special needs (only modifying single component language), Please use the property: local. Example: default.

import locale from 'antd/es/date-picker/locale/zh_CN';

<DatePicker locale={locale} />;
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
import moment from 'moment';

<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;

Common API#

The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicker, WeekPicker.

PropertyDescriptionTypeDefaultVersion
allowClearWhether to show clear buttonbooleantrue
autoFocusget focus when component mountedbooleanfalse
classNamepicker classNamestring''
dateRendercustom rendering function for date cellsfunction(currentDate: moment, today: moment) => React.ReactNode-
disableddetermine whether the DatePicker is disabledbooleanfalse
disabledDatespecify the date that cannot be selected(currentDate: moment) => boolean-
dropdownClassNameto customize the className of the popup calendarstring-
getPopupContainerto set the container of the floating layer, while the default is to create a div element in bodyfunction(trigger)-
localelocalization configurationobjectdefault
modepicker panel mode(Cannot select year or month anymore?time | date | month | year | decade-
openopen state of pickerboolean-
pickerSet picker typedate | week | month | quarter (4.1.0) | yeardate
placeholderplaceholder of date inputstring|RangePicker[]-
popupStyleto customize the style of the popup calendarCSSProperties{}
sizedetermine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32pxlarge | middle | small-
borderedwhether has border styleBooleantrue
suffixIconThe custom suffix iconReactNode-
styleto customize the style of the input boxCSSProperties{}
onOpenChangea callback function, can be executed whether the popup calendar is popped up or closedfunction(open)-
onPanelChangecallback when picker panel mode is changedfunction(value, mode)-
inputReadOnlySet the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse

Common Methods#

NameDescriptionVersion
blur()remove focus
focus()get focus

DatePicker#

PropertyDescriptionTypeDefaultVersion
defaultValueto set default date, if start time or end time is null or undefined, the date range will be an open intervalmoment-
defaultPickerValueto set default picker datemoment-
disabledTimeto specify the time that cannot be selectedfunction(date)-
formatto set the date format, refer to moment.js. When an array is provided, all values are used for parsing and first value is used for formatting.string | string[]"YYYY-MM-DD"
renderExtraFooterrender extra footer in panel(mode) => React.ReactNode-
showTimeto provide an additional time selectionobject|booleanTimePicker Options
showTime.defaultValueto set default time of selected date, demomomentmoment()
showTodaywhether to show "Today" buttonbooleantrue
valueto set datemoment-
onChangea callback function, can be executed when the selected time is changingfunction(date: moment, dateString: string)-
onOkcallback when click ok buttonfunction()-
onPanelChangeCallback function for panel changingfunction(value, mode)-

YearPicker#

PropertyDescriptionTypeDefaultVersion
defaultValueto set default datemoment-
defaultPickerValueto set default picker datemoment-
formatto set the date format, refer to moment.jsstring"YYYY"
renderExtraFooterrender extra footer in panel() => React.ReactNode-
valueto set datemoment-
onChangea callback function, can be executed when the selected time is changingfunction(date: moment, dateString: string)-

QuarterPicker#

Added in 4.1.0.

PropertyDescriptionTypeDefaultVersion
defaultValueto set default datemoment-
defaultPickerValueto set default picker datemoment-
formatto set the date format, refer to moment.jsstring"YYYY-\QQ"
renderExtraFooterrender extra footer in panel() => React.ReactNode-
valueto set datemoment-
onChangea callback function, can be executed when the selected time is changingfunction(date: moment, dateString: string)-

MonthPicker#

PropertyDescriptionTypeDefaultVersion
defaultValueto set default datemoment-
defaultPickerValueto set default picker datemoment-
formatto set the date format, refer to moment.jsstring"YYYY-MM"
monthCellRenderCustom month cell content render methodfunction(date, locale): ReactNode-
renderExtraFooterrender extra footer in panel() => React.ReactNode-
valueto set datemoment-
onChangea callback function, can be executed when the selected time is changingfunction(date: moment, dateString: string)-

WeekPicker#

PropertyDescriptionTypeDefaultVersion
defaultValueto set default datemoment-
defaultPickerValueto set default picker datemoment-
formatto set the date format, refer to moment.jsstring"YYYY-wo"
valueto set datemoment-
onChangea callback function, can be executed when the selected time is changingfunction(date: moment, dateString: string)-
renderExtraFooterrender extra footer in panel(mode) => React.ReactNode-

RangePicker#

PropertyDescriptionTypeDefaultVersion
allowEmptyAllow start or end input leave empty[boolean, boolean][false, false]
dateRenderCustomize date cell. info argument is added in 4.3.0function(currentDate: moment, today: moment, info: { range: 'start' | ''end }) => React.ReactNode-
defaultValueto set default date[moment, moment]-
defaultPickerValueto set default picker date[moment, moment]-
disableddisable start or end[boolean, boolean]-
disabledTimeto specify the time that cannot be selectedfunction(dates: [moment, moment], partial: 'start'|'end')-
formatto set the date format, refer to moment.js. When an array is provided, all values are used for parsing and first value is used for formatting.string | string[]"YYYY-MM-DD HH:mm:ss"
rangespreseted ranges for quick selection{ [range: string]: moment[] } | { [range: string]: () => moment[] }-
renderExtraFooterrender extra footer in panel() => React.ReactNode-
separatorset separator between inputsstring'~'
showTimeto provide an additional time selectionobject|booleanTimePicker Options
showTime.defaultValueto set default time of selected date, demomoment[][moment(), moment()]
valueto set date[moment, moment]-
onCalendarChangea callback function, can be executed when the start time or the end time of the range is changingfunction(dates: [moment, moment], dateStrings: [string, string])-
onChangea callback function, can be executed when the selected time is changingfunction(dates: [moment, moment], dateStrings: [string, string])-

FAQ#

CascaderForm