You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

4.0 KiB

category type title subtitle
Components Form Controls DatePicker 日期选择框

输入或选择日期的控件。

何时使用

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

API

注意:DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale。

import moment from 'moment-timezone/moment-timezone';

// 推荐在入口文件全局设置 locale 与时区
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
// 从 https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json 复制
moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6');
moment.tz.setDefault('Asia/Shanghai')

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

共同的 API

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

参数 说明 类型 默认值
allowClear 是否显示清除按钮 bool true
disabled 禁用 bool false
style 自定义输入框样式 object {}
popupStyle 格外的弹出日历样式 object {}
size 输入框大小,large 高度为 32px,small 为 22px,默认是 28px string
locale 国际化配置 object 默认配置
disabledDate 不可选择的日期 function
getCalendarContainer 定义浮层的容器,默认为 body 上新建 div function(trigger)

DatePicker

参数 说明 类型 默认值
value 日期 moment
defaultValue 默认日期 moment
format 展示的日期格式,配置参考 moment.js string "YYYY-MM-DD"
onChange 时间发生变化的回调 function(date: moment, dateString: string)
open 控制弹层是否展开 bool -
onOpenChange 弹出日历和关闭日历的回调 function(status)
showTime 增加时间选择功能 Object or Boolean TimePicker Options

MonthPicker

参数 说明 类型 默认值
value 日期 moment
defaultValue 默认日期 moment
format 展示的日期格式,配置参考 moment.js string "YYYY-MM"
onChange 时间发生变化的回调,发生在用户选择时间时 function(date: moment, dateString: string)

RangePicker

参数 说明 类型 默认值
value 日期 [moment, moment]
defaultValue 默认日期 [moment, moment]
format 展示的日期格式 string "YYYY-MM-DD HH:mm:ss"
onChange 时间发生变化的回调,发生在用户选择时间时 function(dates: [moment, moment], dateStrings: [string, string])
showTime 增加时间选择功能 Object or Boolean TimePicker Options
disabledTime 不可选择的时间 function(dates: [moment, moment], partial: `'start' 'end'`)