DatePicker 日期选择框

输入或选择日期的控件。

何时使用

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

代码演示

基本使用

日期选择器。

DatePicker日期选择框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. DatePicker,
  5. MonthPicker,
  6. DateTimePicker,
  7. YearPicker,
  8. TimePicker,
  9. WeekPicker,
  10. Row,
  11. Col,
  12. } from 'choerodon-ui/pro';
  13. function handleChange(value, oldValue) {
  14. console.log(
  15. '[datepicker]',
  16. value && value.format(),
  17. '[oldValue]',
  18. oldValue && oldValue.format(),
  19. );
  20. }
  21. ReactDOM.render(
  22. <Row gutter={10}>
  23. <Col style={{ marginBottom: 10 }} span={12}>
  24. <DatePicker placeholder="Select date" onChange={handleChange} />
  25. </Col>
  26. <Col style={{ marginBottom: 10 }} span={12}>
  27. <MonthPicker placeholder="Select month" onChange={handleChange} />
  28. </Col>
  29. <Col style={{ marginBottom: 10 }} span={12}>
  30. <YearPicker placeholder="Select year" onChange={handleChange} />
  31. </Col>
  32. <Col style={{ marginBottom: 10 }} span={12}>
  33. <DateTimePicker

受控日期控件

最简单的用法。

DatePicker日期选择框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. state = {};
  6. handleChange = moment => {
  7. console.log('[controlled]', moment && moment.format());
  8. this.setState({
  9. moment,
  10. });
  11. };
  12. render() {
  13. return (
  14. <DatePicker value={this.state.moment} placeholder="controlled" onChange={this.handleChange} />
  15. );
  16. }
  17. }
  18. ReactDOM.render(<App />, document.getElementById('container'));

DataSet

绑定数据源。

DatePicker日期选择框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, DatePicker, DateTimePicker, Row, Col } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ value, oldValue }) {
  5. console.log(
  6. '[dataset newValue]',
  7. value && value.format(),
  8. '[oldValue]',
  9. oldValue && oldValue.format(),
  10. );
  11. }
  12. const data = [
  13. {
  14. birth: '1984-11-22',
  15. creationTime: '2017-12-22 15:00:00',
  16. },
  17. ];
  18. class App extends React.Component {
  19. ds = new DataSet({
  20. data,
  21. fields: [{ name: 'birth', type: 'date' }, { name: 'creationTime', type: 'dateTime' }],
  22. events: {
  23. update: handleDataSetChange,
  24. },
  25. });

最大最小值

指定最大最小值。

DatePicker日期选择框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. DataSet,
  5. DatePicker,
  6. MonthPicker,
  7. YearPicker,
  8. DateTimePicker,
  9. Row,
  10. Col,
  11. } from 'choerodon-ui/pro';
  12. import moment from 'moment';
  13. function filterDate(currentDate) {
  14. const dayInWeek = currentDate.get('d');
  15. return dayInWeek !== 0 && dayInWeek !== 1;
  16. }
  17. class App extends React.Component {
  18. ds = new DataSet({
  19. autoCreate: true,
  20. fields: [
  21. {
  22. name: 'startDate',
  23. type: 'date',
  24. max: 'endDate',
  25. },
  26. {
  27. name: 'endDate',
  28. type: 'date',
  29. min: 'startDate',
  30. },
  31. ],

单元格渲染器

单元格渲染器。

DatePicker日期选择框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DatePicker } from 'choerodon-ui/pro';
  4. function dayRenderer(props, text, currentDate) {
  5. const dayInWeek = currentDate.get('d');
  6. if (dayInWeek === 0 || dayInWeek === 1) {
  7. props.style = { color: 'red' };
  8. }
  9. return <td {...props} />;
  10. }
  11. function cellRenderer(view) {
  12. if (view === 'date') {
  13. return dayRenderer;
  14. }
  15. }
  16. ReactDOM.render(
  17. <DatePicker placeholder="Select date" cellRenderer={cellRenderer} />,
  18. document.getElementById('container')
  19. );

多值

通过属性multiple设置为多值。

DatePicker日期选择框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, DatePicker, Row, Col } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[multiple]', value, '[oldValue]', oldValue);
  6. }
  7. function handleDataSetChange({ record, name, value, oldValue }) {
  8. console.log(
  9. '[dataset multiple]',
  10. value,
  11. '[oldValue]',
  12. oldValue,
  13. `[record.get('${name}')]`,
  14. record.get(name),
  15. );
  16. }
  17. class App extends React.Component {
  18. ds = new DataSet({
  19. autoCreate: true,
  20. fields: [
  21. {
  22. name: 'date',
  23. type: 'date',
  24. defaultValue: '1984-11-22,2019-08-09',
  25. required: true,
  26. multiple: ',',

范围

范围。

DatePicker日期选择框 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. DataSet,
  5. DatePicker,
  6. MonthPicker,
  7. YearPicker,
  8. DateTimePicker,
  9. TimePicker,
  10. Row,
  11. Col,
  12. } from 'choerodon-ui/pro';
  13. function handleDataSetChange({ value, oldValue }) {
  14. console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
  15. }
  16. function handleChange(value, oldValue) {
  17. console.log('[range newValue]', value, '[oldValue]', oldValue);
  18. }
  19. function rangeValidator(value, name) {
  20. console.log(`[validation ${name} value]`, value);
  21. return true;
  22. }
  23. class App extends React.Component {
  24. ds = new DataSet({
  25. autoCreate: true,
  26. fields: [
  27. {
  28. name: 'date',
  29. type: 'date',
  30. range: ['start', 'end'],
  31. defaultValue: { start: '1984-11-22', end: new Date() },
  32. required: true,

时间格式

时间格式。

DatePicker日期选择框 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. DataSet,
  5. TimePicker,
  6. Row,
  7. Col,
  8. } from 'choerodon-ui/pro';
  9. function handleDataSetChange({ value, oldValue }) {
  10. console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
  11. }
  12. class App extends React.Component {
  13. ds = new DataSet({
  14. autoCreate: true,
  15. fields: [
  16. {
  17. name: 'time',
  18. type: 'time',
  19. format: 'hh:mm:ss A',
  20. },
  21. {
  22. name: 'time2',
  23. type: 'time',
  24. format: 'HH:mm',
  25. },
  26. ],
  27. events: {

时间步距

时间步距。

DatePicker日期选择框 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, TimePicker } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ value, oldValue }) {
  5. console.log('[range dataset newValue]', value, '[oldValue]', oldValue);
  6. }
  7. class App extends React.Component {
  8. ds = new DataSet({
  9. autoCreate: true,
  10. fields: [
  11. {
  12. name: 'time',
  13. type: 'time',
  14. step: {
  15. minute: 15,
  16. second: 10,
  17. },
  18. },
  19. ],
  20. events: {
  21. update: handleDataSetChange,
  22. },
  23. });
  24. render() {
  25. return (
  26. <TimePicker dataSet={this.ds} name="time" />

API

DatePicker

参数说明类型默认值
mode显示模式,可选值: date | dateTime | time | year | month | weekstringdate
min最小日期MomentInput
max最大日期MomentInput
format日期格式,如 YYYY-MM-DD HH:mm:ssstring
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 bottomstringbottom

更多属性请参考 TriggerField