logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
范围选择器
切换不同的选择器
日期格式
日期时间选择
禁用
不可选择日期和时间
选择不超过七天的范围
预设范围
额外的页脚
三种大小
定制日期单元格
自定义状态
无边框
弹出位置
API
国际化配置
共同的 API
共同的方法
DatePicker
DatePicker[picker=year]
DatePicker[picker=quarter]
DatePicker[picker=month]
DatePicker[picker=week]
RangePicker
FAQ
当我指定了 DatePicker/RangePicker 的 mode 属性后,点击后无法选择年份/月份?
如何在 DatePicker 中使用自定义日期库(如 Moment.js )?
为什么时间类组件的国际化 locale 设置不生效?
如何修改周的起始日?
为何使用 panelRender 时,原来面板无法切换?

DatePicker日期选择框

输入或选择日期的控件。
Checkbox多选框Form表单

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
开发
设计

何时使用

当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。

代码演示

基本

最简单的用法,在浮层中可以选择或者输入日期。

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;
Time
切换不同的选择器

提供选择器,自由切换不同类型的日期选择器,常用于日期筛选场合。

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;
日期时间选择

增加选择时间功能,当 showTime 为一个对象时,其属性会传递给内建的 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;
不可选择日期和时间

可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间,其中 disabledTime 需要和 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;
预设范围

可以预设常用的日期范围以提高用户体验。

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;
三种大小

三种大小的输入框,若不设置,则为 middle。

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 为 DatePicker 添加状态,可选 error 或者 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 手动指定弹出的位置。

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;
范围选择器

通过设置 picker 属性,指定范围选择器类型。

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;
日期格式

使用 format 属性,可以自定义日期显示格式。当 format 为数组时,选择器输入框可以输入数组中任意一个有效格式。

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;
禁用

选择框的不可用状态。你也可以通过数组单独禁用 RangePicker 的其中一项。

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;
选择不超过七天的范围

这里举例如何用 onCalendarChange 和 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;
额外的页脚

在浮层中加入额外的页脚,以满足某些定制信息的需求。

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;
定制日期单元格

使用 dateRender 可以自定义日期单元格的内容和样式。

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;
无边框

无边框样式。

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

日期类组件包括以下五种形式。

  • DatePicker
  • DatePicker[picker="month"]
  • DatePicker[picker="week"]
  • DatePicker[picker="year"]
  • DatePicker[picker="quarter"] (4.1.0 新增)
  • RangePicker

国际化配置

默认配置为 en-US,如果你需要设置其他语言,推荐在入口处使用我们提供的国际化组件,详见:ConfigProvider 国际化。

如有特殊需求(仅修改单一组件的语言),请使用 locale 参数,参考:默认配置。

import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
<DatePicker locale={locale} />;
// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale
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>;

共同的 API

以下 API 为 DatePicker、 RangePicker 共享的 API。

参数说明类型默认值版本
allowClear是否显示清除按钮booleantrue
autoFocus自动获取焦点booleanfalse
bordered是否有边框booleantrue
className选择器 classNamestring-
dateRender自定义日期单元格的内容function(currentDate: dayjs, today: dayjs) => React.ReactNode-
disabled禁用booleanfalse
disabledDate不可选择的日期(currentDate: dayjs) => boolean-
format设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 dayjs#format。示例:自定义格式formatTyperc-picker
popupClassName额外的弹出日历 classNamestring-4.23.0
getPopupContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)-
inputReadOnly设置输入框为只读(避免在移动设备上打开虚拟键盘)booleanfalse
locale国际化配置object默认配置
mode日期面板的状态(设置后无法选择年份/月份?)time | date | month | year | decade-
nextIcon自定义下一个图标ReactNode-4.17.0
open控制弹层是否展开boolean-
panelRender自定义渲染面板(panelNode) => ReactNode-4.5.0
picker设置选择器类型date | week | month | quarter | yeardatequarter: 4.1.0
placeholder输入框提示文字string | [string, string]-
placement选择框弹出的位置bottomLeft bottomRight topLeft topRightbottomLeft
popupStyle额外的弹出日历样式CSSProperties{}
prevIcon自定义上一个图标ReactNode-4.17.0
presets预设时间范围快捷选择{ label: React.ReactNode, value: dayjs }[]-
size输入框大小,large 高度为 40px,small 为 24px,默认是 32pxlarge | middle | small-
status设置校验状态'error' | 'warning'-4.19.0
style自定义输入框样式CSSProperties{}
suffixIcon自定义的选择框后缀图标ReactNode-
superNextIcon自定义 << 切换图标ReactNode-4.17.0
superPrevIcon自定义 >> 切换图标ReactNode-4.17.0
onOpenChange弹出日历和关闭日历的回调function(open)-
onPanelChange日历面板切换的回调function(value, mode)-

共同的方法

名称描述版本
blur()移除焦点
focus()获取焦点

DatePicker

参数说明类型默认值版本
defaultPickerValue默认面板日期dayjs-
defaultValue默认日期,如果开始时间或结束时间为 null 或者 undefined,日期范围将是一个开区间dayjs-
disabledTime不可选择的时间function(date)-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY-MM-DD
renderExtraFooter在面板中添加额外的页脚(mode) => React.ReactNode-
showNow当设定了 showTime 的时候,面板是否显示“此刻”按钮boolean-4.4.0
showTime增加时间选择功能Object | booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒,例子dayjsdayjs()
showToday是否展示“今天”按钮booleantrue
value日期dayjs-
onChange时间发生变化的回调function(date: dayjs, dateString: string)-
onOk点击确定按钮的回调function()-
onPanelChange日期面板变化时的回调function(value, mode)-

DatePicker[picker=year]

参数说明类型默认值版本
defaultPickerValue默认面板日期dayjs-
defaultValue默认日期dayjs-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY
renderExtraFooter在面板中添加额外的页脚() => React.ReactNode-
value日期dayjs-
onChange时间发生变化的回调,发生在用户选择时间时function(date: dayjs, dateString: string)-

DatePicker[picker=quarter]

4.1.0 新增。

参数说明类型默认值版本
defaultPickerValue默认面板日期dayjs-
defaultValue默认日期dayjs-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY-\QQ
renderExtraFooter在面板中添加额外的页脚() => React.ReactNode-
value日期dayjs-
onChange时间发生变化的回调,发生在用户选择时间时function(date: dayjs, dateString: string)-

DatePicker[picker=month]

参数说明类型默认值版本
defaultPickerValue默认面板日期dayjs-
defaultValue默认日期dayjs-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY-MM
monthCellRender自定义的月份内容渲染方法function(date, locale): ReactNode-
renderExtraFooter在面板中添加额外的页脚() => React.ReactNode-
value日期dayjs-
onChange时间发生变化的回调,发生在用户选择时间时function(date: dayjs, dateString: string)-

DatePicker[picker=week]

参数说明类型默认值版本
defaultPickerValue默认面板日期dayjs-
defaultValue默认日期dayjs-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY-wo
renderExtraFooter在面板中添加额外的页脚(mode) => React.ReactNode-
value日期dayjs-
onChange时间发生变化的回调,发生在用户选择时间时function(date: dayjs, dateString: string)-

RangePicker

参数说明类型默认值版本
allowEmpty允许起始项部分为空[boolean, boolean][false, false]
dateRender自定义日期单元格的内容。info 参数自 4.3.0 添加function(currentDate: dayjs, today: dayjs, info: { range: start | end }) => React.ReactNode-
defaultPickerValue默认面板日期dayjs[]-
defaultValue默认日期dayjs[]-
disabled禁用起始项[boolean, boolean]-
disabledTime不可选择的时间function(date: dayjs, partial: start | end)-
format展示的日期格式,配置参考 dayjs#format。formatTypeYYYY-MM-DD HH:mm:ss
presets预设时间范围快捷选择{ label: React.ReactNode, value: dayjs[] }[]-
renderExtraFooter在面板中添加额外的页脚() => React.ReactNode-
separator设置分隔符React.ReactNode<SwapRightOutlined />
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒,例子dayjs[][dayjs(), dayjs()]
value日期dayjs[]-
onCalendarChange待选日期发生变化的回调。info 参数自 4.4.0 添加function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:start|end })-
onChange日期范围发生变化的回调function(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

当我指定了 DatePicker/RangePicker 的 mode 属性后,点击后无法选择年份/月份?

请参考常见问答

如何在 DatePicker 中使用自定义日期库(如 Moment.js )?

请参考《使用自定义日期库》

为什么时间类组件的国际化 locale 设置不生效?

参考 FAQ 为什么时间类组件的国际化 locale 设置不生效?。

如何修改周的起始日?

请使用正确的语言包(#5605),或者修改 dayjs 的 locale 配置: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,
});

为何使用 panelRender 时,原来面板无法切换?

当你通过 panelRender 动态改变层级结构时,会使得原本的 Panel 被当做新的节点删除并创建。这使得其原本的状态会被重置,保持结构稳定即可。详情请参考 #27263。