DatePicker 日期选择框
输入或选择日期的控件。
何时使用
当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。
代码演示
基本使用
日期选择器。
import React from 'react';
import ReactDOM from 'react-dom';
import {
DatePicker,
MonthPicker,
DateTimePicker,
YearPicker,
TimePicker,
WeekPicker,
Row,
Col,
} from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log(
'[datepicker]',
value && value.format(),
'[oldValue]',
oldValue && oldValue.format(),
);
}
ReactDOM.render(
<Row gutter={10}>
<Col style={{ marginBottom: 10 }} span={12}>
<DatePicker placeholder="Select date" onChange={handleChange} />
</Col>
<Col style={{ marginBottom: 10 }} span={12}>
<MonthPicker placeholder="Select month" onChange={handleChange} />
</Col>
<Col style={{ marginBottom: 10 }} span={12}>
<YearPicker placeholder="Select year" onChange={handleChange} />
</Col>
<Col style={{ marginBottom: 10 }} span={12}>
<DateTimePicker
受控日期控件
最简单的用法。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui/pro';
class App extends React.Component {
state = {};
handleChange = moment => {
console.log('[controlled]', moment && moment.format());
this.setState({
moment,
});
};
render() {
return (
<DatePicker value={this.state.moment} placeholder="controlled" onChange={this.handleChange} />
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
DataSet
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, DatePicker, DateTimePicker, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log(
'[dataset newValue]',
value && value.format(),
'[oldValue]',
oldValue && oldValue.format(),
);
}
const data = [
{
birth: '1984-11-22',
creationTime: '2017-12-22 15:00:00',
},
];
class App extends React.Component {
ds = new DataSet({
data,
fields: [{ name: 'birth', type: 'date' }, { name: 'creationTime', type: 'dateTime' }],
events: {
update: handleDataSetChange,
},
});
最大最小值
指定最大最小值。
import React from 'react';
import ReactDOM from 'react-dom';
import {
DataSet,
DatePicker,
MonthPicker,
YearPicker,
DateTimePicker,
Row,
Col,
} from 'choerodon-ui/pro';
import moment from 'moment';
function filterDate(currentDate) {
const dayInWeek = currentDate.get('d');
return dayInWeek !== 0 && dayInWeek !== 1;
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'startDate',
type: 'date',
max: 'endDate',
},
{
name: 'endDate',
type: 'date',
min: 'startDate',
},
],
单元格渲染器
单元格渲染器。
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'choerodon-ui/pro';
function dayRenderer(props, text, currentDate) {
const dayInWeek = currentDate.get('d');
if (dayInWeek === 0 || dayInWeek === 1) {
props.style = { color: 'red' };
}
return <td {...props} />;
}
function cellRenderer(view) {
if (view === 'date') {
return dayRenderer;
}
}
ReactDOM.render(
<DatePicker placeholder="Select date" cellRenderer={cellRenderer} />,
document.getElementById('container')
);
多值
通过属性multiple
设置为多值。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, DatePicker, Row, Col } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log('[multiple]', value, '[oldValue]', oldValue);
}
function handleDataSetChange({ record, name, value, oldValue }) {
console.log(
'[dataset multiple]',
value,
'[oldValue]',
oldValue,
`[record.get('${name}')]`,
record.get(name),
);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'date',
type: 'date',
defaultValue: '1984-11-22,2019-08-09',
required: true,
multiple: ',',
范围
范围。
import React from 'react';
import ReactDOM from 'react-dom';
import {
DataSet,
DatePicker,
MonthPicker,
YearPicker,
DateTimePicker,
TimePicker,
Row,
Col,
} from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
}
function handleChange(value, oldValue) {
console.log('[range newValue]', value, '[oldValue]', oldValue);
}
function rangeValidator(value, name) {
console.log(`[validation ${name} value]`, value);
return true;
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'date',
type: 'date',
range: ['start', 'end'],
defaultValue: { start: '1984-11-22', end: new Date() },
required: true,
时间格式
时间格式。
import React from 'react';
import ReactDOM from 'react-dom';
import {
DataSet,
TimePicker,
Row,
Col,
} from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'time',
type: 'time',
format: 'hh:mm:ss A',
},
{
name: 'time2',
type: 'time',
format: 'HH:mm',
},
],
events: {
时间步距
时间步距。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TimePicker } from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'time',
type: 'time',
step: {
minute: 15,
second: 10,
},
},
],
events: {
update: handleDataSetChange,
},
});
render() {
return (
<TimePicker dataSet={this.ds} name="time" />
API
DatePicker
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 显示模式,可选值: date | dateTime | time | year | month | week | string | date |
min | 最小日期 | MomentInput | |
max | 最大日期 | MomentInput | |
format | 日期格式,如 YYYY-MM-DD HH:mm:ss | string | |
step | 时间步距 | { hour: number, minute: number, second: number } | |
filter | 日期过滤 | (currentDate, selected) => boolean | |
cellRenderer | 单元格渲染, view 可选值:date | dateTime | time | week | month | year | decade | (view) => (props, text, currentDate, selected) => ReactNode | |
renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | |
extraFooterPlacement | 额外的页脚的位置 可选值: top bottom | string | bottom |
更多属性请参考 TriggerField。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .