DatePicker日期选择框

DatePicker日期选择框

选择日期的控件。

何时使用

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

代码演示

日期选择器。

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 span={12}>
      <DatePicker placeholder="Select date" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <MonthPicker placeholder="Select month" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <YearPicker placeholder="Select year" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <DateTimePicker mode="dateTime" placeholder="Select date time" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <TimePicker placeholder="Select time" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <WeekPicker placeholder="Select week" onChange={handleChange} />
    </Col>
    <Col span={12}>
      <DatePicker placeholder="禁用" disabled />
    </Col>
  </Row>,
  mountNode
);

DataSet

绑定数据源。

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,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <DatePicker dataSet={this.ds} name="birth" />
        </Col>
        <Col span={12}>
          <DateTimePicker dataSet={this.ds} name="creationTime" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

单元格渲染器

单元格渲染器。

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} />,
  mountNode
);

范围

范围。

import {
  DataSet,
  DatePicker,
  MonthPicker,
  YearPicker,
  DateTimePicker,
  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,
        validator: rangeValidator,
      },
      {
        name: 'date2',
        type: 'date',
        range: true,
        defaultValue: ['1984-11-22', new Date()],
        validator: rangeValidator,
      },
      { name: 'multipleDate', type: 'date', range: true, multiple: true, required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={24}>
          <DatePicker dataSet={this.ds} name="date" placeholder={['Start Date', 'End Date']} />
        </Col>
        <Col span={24}>
          <DatePicker dataSet={this.ds} name="date2" placeholder={['Start Date', 'End Date']} />
        </Col>
        <Col span={24}>
          <DatePicker
            range
            defaultValue={['1984-11-22', new Date()]}
            placeholder={['Start Date', 'End Date']}
            onChange={handleChange}
          />
        </Col>
        <Col span={24}>
          <DatePicker
            range={['start', 'end']}
            defaultValue={{ start: '1984-11-22', end: new Date() }}
            placeholder={['Start Date', 'End Date']}
            onChange={handleChange}
          />
        </Col>
        <Col span={24}>
          <DatePicker dataSet={this.ds} name="multipleDate" placeholder="Choose Date" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

受控日期控件

最简单的用法。

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 />,
  mountNode
);

最大最小值

指定最大最小值。

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' },
    ],
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <DatePicker dataSet={this.ds} name="startDate" placeholder="start date" />
        </Col>
        <Col span={12}>
          <DatePicker dataSet={this.ds} name="endDate" placeholder="end date" />
        </Col>
        <Col span={12}>
          <DatePicker min={moment()} filter={filterDate} placeholder="Moment min & filter" />
        </Col>
        <Col span={12}>
          <MonthPicker min={new Date()} placeholder="Date min" />
        </Col>
        <Col span={12}>
          <YearPicker max="2019-02-10" placeholder="string max" />
        </Col>
        <Col span={12}>
          <DateTimePicker min={moment()} placeholder="Select date time" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

多值

通过属性multiple设置为多值。

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: ',' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <DatePicker dataSet={this.ds} name="date" placeholder="数据源多选" />
        </Col>
        <Col span={12}>
          <DatePicker multiple onChange={handleChange} placeholder="多选" defaultValue={new Date()} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

DatePicker

参数	说明	类型
min	最小日期	MomentInput
max	最大日期	MomentInput
format	日期格式，如 `YYYY-MM-DD HH:mm:ss`	string
filter	日期过滤	(currentDate, selected) => boolean
cellRenderer	单元格渲染, view可选值：`date` `dateTime` `time` `week` `month` `year` `decade`	(view) => (props, text, currentDate, selected) => ReactNode

更多属性请参考 TriggerField。

DatePicker 日期选择框

DatePicker日期选择框

何时使用

代码演示

API

DatePicker