ant-design/components/date-picker/index.zh-CN.md
2020-05-10 22:11:09 +08:00

9.3 KiB
Raw Blame History

category type title subtitle
Components 数据录入 DatePicker 日期选择框

输入或选择日期的控件。

何时使用

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

API

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

  • DatePicker
  • MonthPicker
  • RangePicker
  • WeekPicker
  • YearPicker
  • QuarterPicker (4.1.0 新增)

国际化配置

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

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

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

<DatePicker locale={locale} />;
// 默认语言为 en-US如果你需要设置其他语言推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';

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

共同的 API

以下 API 为 DatePicker、YearPicker、MonthPicker、RangePicker, WeekPicker 共享的 API。

参数 说明 类型 默认值 版本
allowClear 是否显示清除按钮 boolean true
autoFocus 自动获取焦点 boolean false
className 选择器 className string ''
dateRender 自定义日期单元格的内容 function(currentDate: moment, today: moment) => React.ReactNode -
disabled 禁用 boolean false
disabledDate 不可选择的日期 (currentDate: moment) => boolean
dropdownClassName 额外的弹出日历 className string -
getPopupContainer 定义浮层的容器,默认为 body 上新建 div function(trigger)
locale 国际化配置 object 默认配置
mode 日期面板的状态(设置后无法选择年份/月份? time | date | month | year | decade -
open 控制弹层是否展开 boolean -
picker 设置选择器类型 date | week | month | quarter (4.1.0) | year date
placeholder 输入框提示文字 string|RangePicker[] -
popupStyle 额外的弹出日历样式 CSSProperties {}
size 输入框大小,large 高度为 40pxsmall 为 24px默认是 32px large | middle | small
bordered 是否有边框 Boolean true
suffixIcon 自定义的选择框后缀图标 ReactNode -
style 自定义输入框样式 CSSProperties {}
onOpenChange 弹出日历和关闭日历的回调 function(open)
onPanelChange 日历面板切换的回调 function(value, mode) -
inputReadOnly 设置输入框为只读(避免在移动设备上打开虚拟键盘) boolean false

共同的方法

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

DatePicker

参数 说明 类型 默认值 版本
defaultValue 默认日期,如果开始时间或结束时间为 null 或者 undefined,日期范围将是一个开区间 moment
defaultPickerValue 默认面板日期 moment
disabledTime 不可选择的时间 function(date)
format 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD"
renderExtraFooter 在面板中添加额外的页脚 (mode) => React.ReactNode -
showTime 增加时间选择功能 Object|boolean TimePicker Options
showTime.defaultValue 设置用户选择日期时默认的时分秒,例子 moment moment()
showToday 是否展示“今天”按钮 boolean true
value 日期 moment
onChange 时间发生变化的回调 function(date: moment, dateString: string)
onOk 点击确定按钮的回调 function() -
onPanelChange 日期面板变化时的回调 function(value, mode) -

YearPicker

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

QuarterPicker

4.1.0 新增。

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

MonthPicker

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

WeekPicker

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

RangePicker

参数 说明 类型 默认值 版本
allowEmpty 允许起始项部分为空 [boolean, boolean] [false, false]
defaultValue 默认日期 moment[]
defaultPickerValue 默认面板日期 moment[]
disabled 禁用起始项 [boolean, boolean]
disabledTime 不可选择的时间 function(dates: [moment, moment], partial: `'start' 'end'`)
format 展示的日期格式 string "YYYY-MM-DD HH:mm:ss"
ranges 预设时间范围快捷选择 { [range: string]: moment[] } | { [range: string]: () => moment[] }
renderExtraFooter 在面板中添加额外的页脚 () => React.ReactNode -
separator 设置分隔符 string '~'
showTime 增加时间选择功能 Object|boolean TimePicker Options
showTime.defaultValue 设置用户选择日期时默认的时分秒,例子 moment[] [moment(), moment()]
value 日期 moment[]
onCalendarChange 待选日期发生变化的回调 function(dates: [moment, moment], dateStrings: [string, string])
onChange 日期范围发生变化的回调 function(dates: [moment, moment], dateStrings: [string, string])

FAQ