• DatePicker 日期选择框

    输入或选择日期的控件。

    何时使用

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

    代码演示

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

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

    选择框的不可用状态。

    RangePicker 无法满足业务需求时,可以使用两个 DatePicker 实现类似的功能。

    • 通过设置 disabledDate 方法,来约束开始和结束日期。

    • 通过 open onOpenChange 来优化交互。

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

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

    使用 format 属性,可以自定义日期显示格式。

    增加选择时间功能,当 showTime 为一个对象时,其属性会传递给内建的 TimePicker

    可用 disabledDatedisabledTime 分别禁止选择部分日期和时间,其中 disabledTime 需要和 showTime 一起使用。

    RangePicker 可以设置常用的 预设范围 提高用户体验。

    通过组合 modeonPanelChange 控制要展示的面板。

    API

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

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

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

    共同的 API

    以下 API 为 DatePicker、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
    getCalendarContainer 定义浮层的容器,默认为 body 上新建 div function(trigger)
    locale 国际化配置 object 默认配置
    open 控制弹层是否展开 boolean -
    placeholder 输入框提示文字 string|RangePicker[] -
    popupStyle 额外的弹出日历样式 object {}
    dropdownClassName 额外的弹出日历 className string -
    size 输入框大小,large 高度为 40px,small 为 24px,默认是 32px string
    style 自定义输入框样式 object {}
    onOpenChange 弹出日历和关闭日历的回调 function(status)

    共同的方法

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

    DatePicker

    参数 说明 类型 默认值
    defaultValue 默认日期 moment
    disabledTime 不可选择的时间 function(date)
    format 展示的日期格式,配置参考 moment.js string “YYYY-MM-DD”
    renderExtraFooter 在面板中添加额外的页脚 () => React.ReactNode -
    showTime 增加时间选择功能 Object|boolean TimePicker Options
    showTime.defaultValue 设置用户选择日期时默认的时分秒,例子 moment moment()
    showToday 是否展示“今天”按钮 boolean true
    value 日期 moment
    onChange 时间发生变化的回调 function(date: moment, dateString: string)
    onOk 点击确定按钮的回调 function() -

    MonthPicker

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

    WeekPicker

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

    RangePicker

    参数 说明 类型 默认值
    defaultValue 默认日期 moment[]
    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 -
    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])
    onOk 点击确定按钮的回调 function() -