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

更多属性请参考 TriggerField。