DatePicker 日期选择框
输入或选择日期的控件。
何时使用
当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。
代码演示
基本
最简单的用法,在浮层中可以选择或者输入日期。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Row, Col } from 'choerodon-ui';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
function onChange(date, dateString) {
console.log(date, dateString);
}
ReactDOM.render(
<div>
<Row>
<Col span={12}>
<h3>DatePicker</h3>
<DatePicker
style={{ margin: '5 0' }}
onChange={onChange}
label="日期框"
/>
</Col>
<Col span={12}>
<h3>MonthPicker</h3>
<MonthPicker onChange={onChange} placeholder="Select month" />
</Col>
</Row>
<Row>
<Col span={12}>
<h3>RangePicker</h3>
<RangePicker onChange={onChange} label="日期范围" />
</Col>
<Col span={12}>
<h3>WeekPicker</h3>
<WeekPicker
onChange={onChange}
placeholder="Select week"
日期格式
使用 format
属性,可以自定义日期显示格式。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<DatePicker
defaultValue={moment('2015/01/01', dateFormat)}
format={dateFormat}
/>
</div>
<div style={{ marginBottom: 10 }}>
<MonthPicker
defaultValue={moment('2015/01', monthFormat)}
format={monthFormat}
/>
</div>
<RangePicker
defaultValue={[
moment('2015/01/01', dateFormat),
moment('2015/01/01', dateFormat),
]}
format={dateFormat}
/>
</div>,
document.getElementById('container'),
);
三种大小
三种大小的输入框,若不设置,则为 default
。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Radio } from 'choerodon-ui';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
class PickerSizesDemo extends React.Component {
state = {
size: 'default',
};
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
};
render() {
const { size } = this.state;
return (
<div>
<div style={{ marginBottom: 10 }}>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</div>
<div style={{ marginBottom: 10 }}>
<DatePicker size={size} />
</div>
<div style={{ marginBottom: 10 }}>
<MonthPicker size={size} placeholder="Select Month" />
</div>
<div style={{ marginBottom: 10 }}>
<RangePicker size={size} />
</div>
<WeekPicker size={size} placeholder="Select Week" />
</div>
日期时间选择
增加选择时间功能,当 showTime
为一个对象时,其属性会传递给内建的 TimePicker
。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
const { RangePicker } = DatePicker;
function onChange(value, dateString) {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
function onOk(value) {
console.log('onOk: ', value);
}
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Select Time"
onChange={onChange}
onOk={onOk}
/>
</div>
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder={['Start Time', 'End Time']}
禁用
选择框的不可用状态。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
</div>
<div style={{ marginBottom: 10 }}>
<MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
</div>
<div style={{ marginBottom: 10 }}>
<RangePicker
defaultValue={[
moment('2015-06-06', dateFormat),
moment('2015-06-06', dateFormat),
]}
disabled
/>
</div>
</div>,
document.getElementById('container'),
);
不可选择日期和时间
可用 disabledDate
和 disabledTime
分别禁止选择部分日期和时间,其中 disabledTime
需要和 showTime
一起使用。
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { DatePicker } from 'choerodon-ui';
const { MonthPicker, RangePicker } = DatePicker;
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
function disabledDate(current) {
// Can not select days before today and today
return current && current < moment().endOf('day');
}
function disabledDateTime() {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
function disabledRangeTime(_, type) {
if (type === 'start') {
自定义日期范围选择
当 RangePicker
无法满足业务需求时,可以使用两个 DatePicker
实现类似的功能。
- 通过设置
disabledDate
方法,来约束开始和结束日期。- 通过
open
onOpenChange
来优化交互。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
class DateRange extends React.Component {
state = {
startValue: null,
endValue: null,
endOpen: false,
};
disabledStartDate = (startValue) => {
const endValue = this.state.endValue;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
};
disabledEndDate = (endValue) => {
const startValue = this.state.startValue;
if (!endValue || !startValue) {
return false;
}
return endValue.valueOf() <= startValue.valueOf();
};
onChange = (field, value) => {
this.setState({
[field]: value,
});
};
onStartChange = (value) => {
this.onChange('startValue', value);
};
预设范围
RangePicker 可以设置常用的 预设范围 提高用户体验。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
import moment from 'moment';
const RangePicker = DatePicker.RangePicker;
function onChange(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<RangePicker
ranges={{
Today: [moment(), moment()],
'This Month': [moment(), moment().endOf('month')],
}}
onChange={onChange}
/>
</div>
<RangePicker
ranges={{
Today: [moment(), moment()],
'This Month': [moment(), moment().endOf('month')],
}}
showTime
format="YYYY/MM/DD HH:mm:ss"
onChange={onChange}
/>
额外的页脚
在浮层中加入额外的页脚,以满足某些定制信息的需求。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
const { RangePicker, MonthPicker } = DatePicker;
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<DatePicker renderExtraFooter={() => 'extra footer'} />
</div>
<div style={{ marginBottom: 10 }}>
<DatePicker renderExtraFooter={() => 'extra footer'} showTime />
</div>
<div style={{ marginBottom: 10 }}>
<RangePicker renderExtraFooter={() => 'extra footer'} />
</div>
<div style={{ marginBottom: 10 }}>
<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
</div>
<MonthPicker
renderExtraFooter={() => 'extra footer'}
placeholder="Select month"
/>
</div>,
document.getElementById('container'),
);
受控面板
通过组合 mode
与 onPanelChange
控制要展示的面板。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui';
const { RangePicker } = DatePicker;
class ControlledDatePicker extends React.Component {
state = { mode: 'time' };
handleOpenChange = (open) => {
if (open) {
this.setState({ mode: 'time' });
}
};
handlePanelChange = (value, mode) => {
this.setState({ mode });
};
render() {
return (
<DatePicker
mode={this.state.mode}
showTime
onOpenChange={this.handleOpenChange}
onPanelChange={this.handlePanelChange}
/>
);
}
}
class ControlledRangePicker extends React.Component {
定制日期单元格
使用 dateRender
可以自定义日期单元格的内容和样式。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Row, Col } from 'choerodon-ui';
const { RangePicker } = DatePicker;
ReactDOM.render(
<div>
<div style={{ marginBottom: 10 }}>
<DatePicker
dateRender={(current) => {
const style = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
<div className="c7n-calendar-date" style={style}>
{current.date()}
</div>
);
}}
/>
</div>
<RangePicker
dateRender={(current) => {
const style = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
API
日期类组件包括以下四种形式。
- DatePicker
- MonthPicker
- RangePicker
- WeekPicker
注意: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) | 无 |
onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |
mode | 日期面板的状态 | time|date|month|year | ‘date’ |
共同的方法
名称 | 描述 |
---|---|
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() | - |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .