logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Range Picker
Switchable picker
Date Format
Choose Time
Disabled
Disabled Date & Time
Select range dates in 7 days
Preset Ranges
Extra Footer
Three Sizes
Customized Date Rendering
Status
Bordered-less
Placement
API
Localization
Common API
Common Methods
DatePicker
DatePicker[picker=year]
DatePicker[picker=quarter]
DatePicker[picker=month]
DatePicker[picker=week]
RangePicker
FAQ
When set mode to DatePicker/RangePicker, cannot select year or month anymore?
How to use DatePicker with customize date library like dayjs?
Why config dayjs.locale globally not work?
How to modify start day of week?
Why origin panel don't switch when using panelRender?

DatePicker

To select or input a date.
CheckboxForm

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

When To Use

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

Examples

Basic

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

expand codeexpand code
TypeScript
JavaScript
import type { DatePickerProps } from 'antd';
import { DatePicker, Space } from 'antd';
import React from 'react';

const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};

const App: React.FC = () => (
  <Space direction="vertical">
    <DatePicker onChange={onChange} />
    <DatePicker onChange={onChange} picker="week" />
    <DatePicker onChange={onChange} picker="month" />
    <DatePicker onChange={onChange} picker="quarter" />
    <DatePicker onChange={onChange} picker="year" />
  </Space>
);

export default App;
Switchable picker

Switch in different types of pickers by Select.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { DatePickerProps, TimePickerProps } from 'antd';
import { DatePicker, Select, Space, TimePicker } from 'antd';

const { Option } = Select;

type PickerType = 'time' | 'date';

const PickerWithType = ({
  type,
  onChange,
}: {
  type: PickerType;
  onChange: TimePickerProps['onChange'] | DatePickerProps['onChange'];
}) => {
  if (type === 'time') return <TimePicker onChange={onChange} />;
  if (type === 'date') return <DatePicker onChange={onChange} />;
  return <DatePicker picker={type} onChange={onChange} />;
};

const App: React.FC = () => {
  const [type, setType] = useState<PickerType>('time');

  return (
    <Space>
      <Select value={type} onChange={setType}>
        <Option value="time">Time</Option>
        <Option value="date">Date</Option>
        <Option value="week">Week</Option>
        <Option value="month">Month</Option>
        <Option value="quarter">Quarter</Option>
        <Option value="year">Year</Option>
      </Select>
      <PickerWithType type={type} onChange={(value) => console.log(value)} />
    </Space>
  );
};

export default App;
Choose Time

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
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';

const { RangePicker } = DatePicker;

const onChange = (
  value: DatePickerProps['value'] | RangePickerProps['value'],
  dateString: [string, string] | string,
) => {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
};

const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
  console.log('onOk: ', value);
};

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker showTime onChange={onChange} onOk={onOk} />
    <RangePicker
      showTime={{ format: 'HH:mm' }}
      format="YYYY-MM-DD HH:mm"
      onChange={onChange}
      onOk={onOk}
    />
  </Space>
);

export default App;
Disabled Date & Time

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;

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

// eslint-disable-next-line arrow-body-style
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};

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

const disabledRangeTime: RangePickerProps['disabledTime'] = (_, 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],
  };
};

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      disabledTime={disabledDateTime}
      showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
    />
    <DatePicker picker="month" disabledDate={disabledDate} />
    <RangePicker disabledDate={disabledDate} />
    <RangePicker
      disabledDate={disabledDate}
      disabledTime={disabledRangeTime}
      showTime={{
        hideDisabledOptions: true,
        defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
      }}
      format="YYYY-MM-DD HH:mm:ss"
    />
  </Space>
);

export default App;
Preset Ranges

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';

const { RangePicker } = DatePicker;

const onChange = (date: Dayjs) => {
  if (date) {
    console.log('Date: ', date);
  } else {
    console.log('Clear');
  }
};
const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
  if (dates) {
    console.log('From: ', dates[0], ', to: ', dates[1]);
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
  } else {
    console.log('Clear');
  }
};

const rangePresets: {
  label: string;
  value: [Dayjs, Dayjs];
}[] = [
  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
];

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker
      presets={[
        { label: 'Yesterday', value: dayjs().add(-1, 'd') },
        { label: 'Last Week', value: dayjs().add(-7, 'd') },
        { label: 'Last Month', value: dayjs().add(-1, 'month') },
      ]}
      onChange={onChange}
    />
    <RangePicker presets={rangePresets} onChange={onRangeChange} />
    <RangePicker
      presets={rangePresets}
      showTime
      format="YYYY/MM/DD HH:mm:ss"
      onChange={onRangeChange}
    />
  </Space>
);

export default App;
Three Sizes

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { DatePicker, Radio, Space } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';

const { RangePicker } = DatePicker;

const App: React.FC = () => {
  const [size, setSize] = useState<SizeType>('middle');

  const handleSizeChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };

  return (
    <Space direction="vertical" size={12}>
      <Radio.Group value={size} onChange={handleSizeChange}>
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="middle">middle</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <DatePicker size={size} />
      <DatePicker size={size} picker="month" />
      <RangePicker size={size} />
      <DatePicker size={size} picker="week" />
    </Space>
  );
};

export default App;
Status

Add status to DatePicker with status, which could be error or warning.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <DatePicker status="error" style={{ width: '100%' }} />
    <DatePicker status="warning" style={{ width: '100%' }} />
    <DatePicker.RangePicker status="error" style={{ width: '100%' }} />
    <DatePicker.RangePicker status="warning" style={{ width: '100%' }} />
  </Space>
);

export default App;
Placement

You can manually specify the position of the popup via placement.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { DatePickerProps, RadioChangeEvent } from 'antd';
import { DatePicker, Radio } from 'antd';

const { RangePicker } = DatePicker;

const App: React.FC = () => {
  const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');

  const placementChange = (e: RadioChangeEvent) => {
    SetPlacement(e.target.value);
  };

  return (
    <>
      <Radio.Group value={placement} onChange={placementChange}>
        <Radio.Button value="topLeft">topLeft</Radio.Button>
        <Radio.Button value="topRight">topRight</Radio.Button>
        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
      </Radio.Group>
      <br />
      <br />
      <DatePicker placement={placement} />
      <br />
      <br />
      <RangePicker placement={placement} />
    </>
  );
};

export default App;
Range Picker

Set range picker type by picker prop.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker;

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <RangePicker />
    <RangePicker showTime />
    <RangePicker picker="week" />
    <RangePicker picker="month" />
    <RangePicker picker="quarter" />
    <RangePicker picker="year" />
  </Space>
);

export default App;
Date Format

We can set the date format by format. When format is an array, the input box can be entered in any of the valid formats of the array.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import type { DatePickerProps } from 'antd';
import { DatePicker, Space } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;

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

/** Manually entering any of the following formats will perform date parsing */
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];

const customFormat: DatePickerProps['format'] = (value) =>
  `custom format: ${value.format(dateFormat)}`;

const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
    .endOf('week')
    .format(weekFormat)}`;

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
    <DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
    <DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
    <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
    <RangePicker
      defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
      format={dateFormat}
    />
    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
  </Space>
);

export default App;
Disabled

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY-MM-DD';

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker defaultValue={dayjs('2015-06-06', dateFormat)} disabled />
    <DatePicker picker="month" defaultValue={dayjs('2015-06', 'YYYY-MM')} disabled />
    <RangePicker
      defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
      disabled
    />
    <RangePicker
      defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}
      disabled={[false, true]}
    />
  </Space>
);

export default App;
Select range dates in 7 days

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { DatePicker } from 'antd';
import type { Dayjs } from 'dayjs';

const { RangePicker } = DatePicker;

type RangeValue = [Dayjs | null, Dayjs | null] | null;

const App: React.FC = () => {
  const [dates, setDates] = useState<RangeValue>(null);
  const [value, setValue] = useState<RangeValue>(null);

  const disabledDate = (current: Dayjs) => {
    if (!dates) {
      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;
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };

  return (
    <RangePicker
      value={dates || value}
      disabledDate={disabledDate}
      onCalendarChange={(val) => setDates(val)}
      onChange={(val) => setValue(val)}
      onOpenChange={onOpenChange}
    />
  );
};

export default App;
Extra Footer

Render extra footer in panel for customized requirements.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker;

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker renderExtraFooter={() => 'extra footer'} />
    <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
    <RangePicker renderExtraFooter={() => 'extra footer'} />
    <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
    <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
  </Space>
);

export default App;
Customized Date Rendering

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker;

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker
      dateRender={(current) => {
        const style: React.CSSProperties = {};
        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: React.CSSProperties = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </Space>
);

export default App;
Bordered-less

Bordered-less style component.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker;

const App: React.FC = () => (
  <Space direction="vertical" size={12}>
    <DatePicker bordered={false} />
    <DatePicker picker="week" bordered={false} />
    <DatePicker picker="month" bordered={false} />
    <DatePicker picker="year" bordered={false} />
    <RangePicker bordered={false} />
    <RangePicker picker="week" bordered={false} />
    <RangePicker picker="month" bordered={false} />
    <RangePicker picker="year" bordered={false} />
  </Space>
);

export default App;

API

There are five kinds of picker:

  • DatePicker
  • DatePicker[picker="month"]
  • DatePicker[picker="week"]
  • DatePicker[picker="year"]
  • DatePicker[picker="quarter"] (Added in 4.1.0)
  • RangePicker

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 'dayjs/locale/zh-cn';
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 dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';
<ConfigProvider locale={locale}>
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
</ConfigProvider>;

Common API

The following APIs are shared by DatePicker, RangePicker.

PropertyDescriptionTypeDefaultVersion
allowClearWhether to show clear buttonbooleantrue
autoFocusIf get focus when component mountedbooleanfalse
borderedWhether has border stylebooleantrue
classNameThe picker classNamestring-
dateRenderCustom rendering function for date cellsfunction(currentDate: dayjs, today: dayjs) => React.ReactNode-
disabledDetermine whether the DatePicker is disabledbooleanfalse
disabledDateSpecify the date that cannot be selected(currentDate: dayjs) => boolean-
formatTo set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to dayjs#format. for example: Custom FormatformatTyperc-picker
popupClassNameTo customize the className of the popup calendarstring-4.23.0
getPopupContainerTo set the container of the floating layer, while the default is to create a div element in bodyfunction(trigger)-
inputReadOnlySet the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse
localeLocalization configurationobjectdefault
modeThe picker panel mode( Cannot select year or month anymore? )time | date | month | year | decade-
nextIconThe custom next iconReactNode-4.17.0
openThe open state of pickerboolean-
panelRenderCustomize panel render(panelNode) => ReactNode-4.5.0
pickerSet picker typedate | week | month | quarter | yeardatequarter: 4.1.0
placeholderThe placeholder of date inputstring | [string,string]-
placementThe position where the selection box pops upbottomLeft bottomRight topLeft topRightbottomLeft
popupStyleTo customize the style of the popup calendarCSSProperties{}
presetsThe preset ranges for quick selection{ label: React.ReactNode, value: dayjs }[]-
prevIconThe custom prev iconReactNode-4.17.0
sizeTo determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32pxlarge | middle | small-
statusSet validation status'error' | 'warning'-4.19.0
styleTo customize the style of the input boxCSSProperties{}
suffixIconThe custom suffix iconReactNode-
superNextIconThe custom super next iconReactNode-4.17.0
superPrevIconThe custom super prev iconReactNode-4.17.0
onOpenChangeCallback function, can be executed whether the popup calendar is popped up or closedfunction(open)-
onPanelChangeCallback when picker panel mode is changedfunction(value, mode)-

Common Methods

NameDescriptionVersion
blur()Remove focus
focus()Get focus

DatePicker

PropertyDescriptionTypeDefaultVersion
defaultPickerValueTo set default picker datedayjs-
defaultValueTo set default date, if start time or end time is null or undefined, the date range will be an open intervaldayjs-
disabledTimeTo specify the time that cannot be selectedfunction(date)-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY-MM-DD
renderExtraFooterRender extra footer in panel(mode) => React.ReactNode-
showNowWhether to show 'Now' button on panel when showTime is setboolean-4.4.0
showTimeTo provide an additional time selectionobject | booleanTimePicker Options
showTime.defaultValueTo set default time of selected date, demodayjsdayjs()
showTodayWhether to show Today buttonbooleantrue
valueTo set datedayjs-
onChangeCallback function, can be executed when the selected time is changingfunction(date: dayjs, dateString: string)-
onOkCallback when click ok buttonfunction()-
onPanelChangeCallback function for panel changingfunction(value, mode)-

DatePicker[picker=year]

PropertyDescriptionTypeDefaultVersion
defaultPickerValueTo set default picker datedayjs-
defaultValueTo set default datedayjs-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY
renderExtraFooterRender extra footer in panel() => React.ReactNode-
valueTo set datedayjs-
onChangeCallback function, can be executed when the selected time is changingfunction(date: dayjs, dateString: string)-

DatePicker[picker=quarter]

Added in 4.1.0.

PropertyDescriptionTypeDefaultVersion
defaultPickerValueTo set default picker datedayjs-
defaultValueTo set default datedayjs-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY-\QQ
renderExtraFooterRender extra footer in panel() => React.ReactNode-
valueTo set datedayjs-
onChangeCallback function, can be executed when the selected time is changingfunction(date: dayjs, dateString: string)-

DatePicker[picker=month]

PropertyDescriptionTypeDefaultVersion
defaultPickerValueTo set default picker datedayjs-
defaultValueTo set default datedayjs-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY-MM
monthCellRenderCustom month cell content render methodfunction(date, locale): ReactNode-
renderExtraFooterRender extra footer in panel() => React.ReactNode-
valueTo set datedayjs-
onChangeCallback function, can be executed when the selected time is changingfunction(date: dayjs, dateString: string)-

DatePicker[picker=week]

PropertyDescriptionTypeDefaultVersion
defaultPickerValueTo set default picker datedayjs-
defaultValueTo set default datedayjs-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY-wo
renderExtraFooterRender extra footer in panel(mode) => React.ReactNode-
valueTo set datedayjs-
onChangeCallback function, can be executed when the selected time is changingfunction(date: dayjs, dateString: string)-

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: dayjs, today: dayjs, info: { range: start | end }) => React.ReactNode-
defaultPickerValueTo set default picker date[dayjs, dayjs]-
defaultValueTo set default date[dayjs, dayjs]-
disabledIf disable start or end[boolean, boolean]-
disabledTimeTo specify the time that cannot be selectedfunction(date: dayjs, partial: start | end)-
formatTo set the date format. refer to dayjs#formatformatTypeYYYY-MM-DD HH:mm:ss
presetsThe preset ranges for quick selection{ label: React.ReactNode, value: dayjs[] }[]-
renderExtraFooterRender extra footer in panel() => React.ReactNode-
separatorSet separator between inputsReact.ReactNode<SwapRightOutlined />
showTimeTo provide an additional time selectionobject | booleanTimePicker Options
showTime.defaultValueTo set default time of selected date, demodayjs[][dayjs(), dayjs()]
valueTo set date[dayjs, dayjs]-
onCalendarChangeCallback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:start|end })-
onChangeCallback function, can be executed when the selected time is changingfunction(dates: [dayjs, dayjs], dateStrings: [string, string])-

formatType

import type { Dayjs } from 'dayjs';
type Generic = string;
type GenericFn = (value: Dayjs) => string;
export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;

FAQ

When set mode to DatePicker/RangePicker, cannot select year or month anymore?

Please refer FAQ

How to use DatePicker with customize date library like dayjs?

Please refer Use custom date library

Why config dayjs.locale globally not work?

DatePicker default set locale as en in v4. You can config DatePicker locale prop or ConfigProvider locale prop instead.

Date-related components locale is not working?

See FAQ Date-related-components-locale-is-not-working?

How to modify start day of week?

Please use correct language (#5605), or update dayjs locale config:

  • Example: https://codesandbox.io/s/dayjs-day-of-week-x9tuj2?file=/demo.tsx
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import 'dayjs/plugin/updateLocale';
dayjs.updateLocale('zh-cn', {
weekStart: 0,
});

Why origin panel don't switch when using panelRender?

When you change the layout of nodes by panelRender, React will unmount and re-mount it which reset the component state. You should keep the layout stable. Please ref #27263 for more info.

Time