DatePicker 日期选择框

输入或选择日期的控件。

何时使用

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

代码演示

基本

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

DatePicker日期选择框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker, Row, Col } from 'choerodon-ui';
  4. const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
  5. function onChange(date, dateString) {
  6. console.log(date, dateString);
  7. }
  8. ReactDOM.render(
  9. <div>
  10. <Row>
  11. <Col span={12}>
  12. <h3>DatePicker</h3>
  13. <DatePicker
  14. style={{ margin: '5 0' }}
  15. onChange={onChange}
  16. label="日期框"
  17. />
  18. </Col>
  19. <Col span={12}>
  20. <h3>MonthPicker</h3>
  21. <MonthPicker onChange={onChange} placeholder="Select month" />
  22. </Col>
  23. </Row>
  24. <Row>
  25. <Col span={12}>
  26. <h3>RangePicker</h3>
  27. <RangePicker onChange={onChange} label="日期范围" />
  28. </Col>
  29. <Col span={12}>
  30. <h3>WeekPicker</h3>
  31. <WeekPicker
  32. onChange={onChange}
  33. placeholder="Select week"

日期格式

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

DatePicker日期选择框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. const { MonthPicker, RangePicker } = DatePicker;
  6. const dateFormat = 'YYYY/MM/DD';
  7. const monthFormat = 'YYYY/MM';
  8. ReactDOM.render(
  9. <div>
  10. <div style={{ marginBottom: 10 }}>
  11. <DatePicker
  12. defaultValue={moment('2015/01/01', dateFormat)}
  13. format={dateFormat}
  14. />
  15. </div>
  16. <div style={{ marginBottom: 10 }}>
  17. <MonthPicker
  18. defaultValue={moment('2015/01', monthFormat)}
  19. format={monthFormat}
  20. />
  21. </div>
  22. <RangePicker
  23. defaultValue={[
  24. moment('2015/01/01', dateFormat),
  25. moment('2015/01/01', dateFormat),
  26. ]}
  27. format={dateFormat}
  28. />
  29. </div>,
  30. document.getElementById('container'),
  31. );

三种大小

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

DatePicker日期选择框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker, Radio } from 'choerodon-ui';
  4. const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
  5. class PickerSizesDemo extends React.Component {
  6. state = {
  7. size: 'default',
  8. };
  9. handleSizeChange = (e) => {
  10. this.setState({ size: e.target.value });
  11. };
  12. render() {
  13. const { size } = this.state;
  14. return (
  15. <div>
  16. <div style={{ marginBottom: 10 }}>
  17. <Radio.Group value={size} onChange={this.handleSizeChange}>
  18. <Radio.Button value="large">Large</Radio.Button>
  19. <Radio.Button value="default">Default</Radio.Button>
  20. <Radio.Button value="small">Small</Radio.Button>
  21. </Radio.Group>
  22. </div>
  23. <div style={{ marginBottom: 10 }}>
  24. <DatePicker size={size} />
  25. </div>
  26. <div style={{ marginBottom: 10 }}>
  27. <MonthPicker size={size} placeholder="Select Month" />
  28. </div>
  29. <div style={{ marginBottom: 10 }}>
  30. <RangePicker size={size} />
  31. </div>
  32. <WeekPicker size={size} placeholder="Select Week" />
  33. </div>

日期时间选择

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

DatePicker日期选择框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. const { RangePicker } = DatePicker;
  5. function onChange(value, dateString) {
  6. console.log('Selected Time: ', value);
  7. console.log('Formatted Selected Time: ', dateString);
  8. }
  9. function onOk(value) {
  10. console.log('onOk: ', value);
  11. }
  12. ReactDOM.render(
  13. <div>
  14. <div style={{ marginBottom: 10 }}>
  15. <DatePicker
  16. showTime
  17. format="YYYY-MM-DD HH:mm:ss"
  18. placeholder="Select Time"
  19. onChange={onChange}
  20. onOk={onOk}
  21. />
  22. </div>
  23. <RangePicker
  24. showTime={{ format: 'HH:mm' }}
  25. format="YYYY-MM-DD HH:mm"
  26. placeholder={['Start Time', 'End Time']}

禁用

选择框的不可用状态。

DatePicker日期选择框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. const { MonthPicker, RangePicker } = DatePicker;
  6. const dateFormat = 'YYYY-MM-DD';
  7. ReactDOM.render(
  8. <div>
  9. <div style={{ marginBottom: 10 }}>
  10. <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
  11. </div>
  12. <div style={{ marginBottom: 10 }}>
  13. <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
  14. </div>
  15. <div style={{ marginBottom: 10 }}>
  16. <RangePicker
  17. defaultValue={[
  18. moment('2015-06-06', dateFormat),
  19. moment('2015-06-06', dateFormat),
  20. ]}
  21. disabled
  22. />
  23. </div>
  24. </div>,
  25. document.getElementById('container'),
  26. );

不可选择日期和时间

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

DatePicker日期选择框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import moment from 'moment';
  4. import { DatePicker } from 'choerodon-ui';
  5. const { MonthPicker, RangePicker } = DatePicker;
  6. function range(start, end) {
  7. const result = [];
  8. for (let i = start; i < end; i++) {
  9. result.push(i);
  10. }
  11. return result;
  12. }
  13. function disabledDate(current) {
  14. // Can not select days before today and today
  15. return current && current < moment().endOf('day');
  16. }
  17. function disabledDateTime() {
  18. return {
  19. disabledHours: () => range(0, 24).splice(4, 20),
  20. disabledMinutes: () => range(30, 60),
  21. disabledSeconds: () => [55, 56],
  22. };
  23. }
  24. function disabledRangeTime(_, type) {
  25. if (type === 'start') {

自定义日期范围选择

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

  • 通过设置 disabledDate 方法,来约束开始和结束日期。
  • 通过 open onOpenChange 来优化交互。

DatePicker日期选择框 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. class DateRange extends React.Component {
  5. state = {
  6. startValue: null,
  7. endValue: null,
  8. endOpen: false,
  9. };
  10. disabledStartDate = (startValue) => {
  11. const endValue = this.state.endValue;
  12. if (!startValue || !endValue) {
  13. return false;
  14. }
  15. return startValue.valueOf() > endValue.valueOf();
  16. };
  17. disabledEndDate = (endValue) => {
  18. const startValue = this.state.startValue;
  19. if (!endValue || !startValue) {
  20. return false;
  21. }
  22. return endValue.valueOf() <= startValue.valueOf();
  23. };
  24. onChange = (field, value) => {
  25. this.setState({
  26. [field]: value,
  27. });
  28. };
  29. onStartChange = (value) => {
  30. this.onChange('startValue', value);
  31. };

预设范围

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

DatePicker日期选择框 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. const RangePicker = DatePicker.RangePicker;
  6. function onChange(dates, dateStrings) {
  7. console.log('From: ', dates[0], ', to: ', dates[1]);
  8. console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
  9. }
  10. ReactDOM.render(
  11. <div>
  12. <div style={{ marginBottom: 10 }}>
  13. <RangePicker
  14. ranges={{
  15. Today: [moment(), moment()],
  16. 'This Month': [moment(), moment().endOf('month')],
  17. }}
  18. onChange={onChange}
  19. />
  20. </div>
  21. <RangePicker
  22. ranges={{
  23. Today: [moment(), moment()],
  24. 'This Month': [moment(), moment().endOf('month')],
  25. }}
  26. showTime
  27. format="YYYY/MM/DD HH:mm:ss"
  28. onChange={onChange}
  29. />

额外的页脚

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

DatePicker日期选择框 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. const { RangePicker, MonthPicker } = DatePicker;
  5. ReactDOM.render(
  6. <div>
  7. <div style={{ marginBottom: 10 }}>
  8. <DatePicker renderExtraFooter={() => 'extra footer'} />
  9. </div>
  10. <div style={{ marginBottom: 10 }}>
  11. <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
  12. </div>
  13. <div style={{ marginBottom: 10 }}>
  14. <RangePicker renderExtraFooter={() => 'extra footer'} />
  15. </div>
  16. <div style={{ marginBottom: 10 }}>
  17. <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
  18. </div>
  19. <MonthPicker
  20. renderExtraFooter={() => 'extra footer'}
  21. placeholder="Select month"
  22. />
  23. </div>,
  24. document.getElementById('container'),
  25. );

受控面板

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

DatePicker日期选择框 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui';
  4. const { RangePicker } = DatePicker;
  5. class ControlledDatePicker extends React.Component {
  6. state = { mode: 'time' };
  7. handleOpenChange = (open) => {
  8. if (open) {
  9. this.setState({ mode: 'time' });
  10. }
  11. };
  12. handlePanelChange = (value, mode) => {
  13. this.setState({ mode });
  14. };
  15. render() {
  16. return (
  17. <DatePicker
  18. mode={this.state.mode}
  19. showTime
  20. onOpenChange={this.handleOpenChange}
  21. onPanelChange={this.handlePanelChange}
  22. />
  23. );
  24. }
  25. }
  26. class ControlledRangePicker extends React.Component {

定制日期单元格

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

DatePicker日期选择框 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker, Row, Col } from 'choerodon-ui';
  4. const { RangePicker } = DatePicker;
  5. ReactDOM.render(
  6. <div>
  7. <div style={{ marginBottom: 10 }}>
  8. <DatePicker
  9. dateRender={(current) => {
  10. const style = {};
  11. if (current.date() === 1) {
  12. style.border = '1px solid #1890ff';
  13. style.borderRadius = '50%';
  14. }
  15. return (
  16. <div className="c7n-calendar-date" style={style}>
  17. {current.date()}
  18. </div>
  19. );
  20. }}
  21. />
  22. </div>
  23. <RangePicker
  24. dateRender={(current) => {
  25. const style = {};
  26. if (current.date() === 1) {
  27. style.border = '1px solid #1890ff';
  28. style.borderRadius = '50%';
  29. }
  30. return (

API

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

  • DatePicker
  • MonthPicker
  • RangePicker
  • WeekPicker

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

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

共同的 API

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

参数说明类型默认值
allowClear是否显示清除按钮booleantrue
autoFocus自动获取焦点booleanfalse
className选择器 classNamestring‘’
dateRender自定义日期单元格的内容function(currentDate: moment, today: moment) => React.ReactNode-
disabled禁用booleanfalse
disabledDate不可选择的日期(currentDate: moment) => boolean
getCalendarContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)
locale国际化配置object默认配置
open控制弹层是否展开boolean-
placeholder输入框提示文字string|RangePicker[]-
popupStyle额外的弹出日历样式object{}
dropdownClassName额外的弹出日历 classNamestring-
size输入框大小,large 高度为 40px,small 为 24px,默认是 32pxstring
style自定义输入框样式object{}
onOpenChange弹出日历和关闭日历的回调function(status)
onPanelChange日期面板变化时的回调function(value, mode)-
mode日期面板的状态time|date|month|year‘date’

共同的方法

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

DatePicker

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

MonthPicker

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

WeekPicker

参数说明类型默认值
defaultValue默认日期moment-
format展示的日期格式,配置参考 moment.jsstring“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|booleanTimePicker 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()-