# MDateTimePicker 日期时间选择器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/date-time-picker/freepass)
- 平台：移动端
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/H5/E10zjys/#s13
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MDateTimePicker]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType, MSelect, SingleType, SelectValueType, SelectOptionData } from "@weapp/ui";
import { timeFormat } from "d3";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

const type_options = [
  { id: 'date', content: '选择年月日时分秒' },
  { id: 'year', content: '选择年' },
  { id: 'month', content: '选择年月' },
  { id: 'day', content: '选择年月日' },
  { id: 'time', content: '选择时间' },
  { id: 'season', content: '选择季度' },
  { id: 'halfyear', content: '选择半年度' },
]

const timeFormat_options = [
  { id: 'HH', content: '时' },
  { id: 'HH:mm', content: '时分' },
  { id: 'HH:mm:ss', content: '时分秒' },
]

export default class MDateTimePickerDemo extends Component {

  state = {
    type: void 0,
    timeFormat: void 0,
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  handleSelect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('selected:', value, option);
    this.setState({ type: value })
  }
  handleSelect2 = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('selected:', value, option);
    this.setState({ timeFormat: value })
  }
  render() {
    const { type, timeFormat } = this.state
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <MSelect
          data={type_options}
          value={type}
          style={{ border: '1px dashed black' }}
          searchable
          placeholder="点击改变下方日期时间类型"
          onSelect={this.handleSelect}
        />
        <MSelect
          data={timeFormat_options}
          value={timeFormat}
          style={{ border: '1px dashed black' }}
          searchable
          placeholder="点击选择时分秒类型"
          onSelect={this.handleSelect2}
        />
        <MDateTimePicker
          onChange={this.onChange}
          type={type as any}
          // type={'time'}
          // value={'12:30:45'}
          timeFormat={timeFormat as any}
        // showFormat={'HH时mm分ss秒'}
        />
        <p>禁用</p>
        <MDateTimePicker
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          disabled
        />
        <p>只读模式1（超出省略）</p>
        <MDateTimePicker
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          readOnly
        />
        <p>只读模式2（超出折断）</p>
        <MDateTimePicker
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          readOnly
          inForm
        />
        <p>只读模式3（超出换行）</p>
        <MDateTimePicker
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          readOnly
          inForm
          selectedWrap
        />
        <p>使用 format 指定抛出数据格式</p>
        <MDateTimePicker
          format={'Date'}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 受控

外部控制value以及visible

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  visible: boolean;
  value1: DateType | null;
  value2: DateType;
  value3: DateType;
  value4: DateType;
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      visible: false,
      value1: '2021-9-1 12:5:5',
      // value1: null,
      value2: '12:5:5',
      value3: '2012-Q3',
      value4: '2012-H1',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValue1Change', value)
    this.setState({ value1: value as DateType })
  }
  onValue2Change = (value: DateType | DateType[]) => {
    console.info('onValue2Change', value)
    this.setState({ value2: value as DateType })
  }
  onValue3Change = (value: DateType | DateType[]) => {
    console.info('onValue3Change', value)
    this.setState({ value3: value as DateType })
  }
  onValue4Change = (value: DateType | DateType[]) => {
    console.info('onValue4Change', value)
    this.setState({ value4: value as DateType })
  }
  onDialogOpen = (value: DateType | DateType[]) => { console.info('onDialogOpen', value) }
  onDialogClose = (value: DateType | DateType[]) => { console.info('onDialogClose', value) }

  render() {
    return (
      <div className={prefixCls}>
        <p>受控：value为2021-9-1 12:5:5</p>
        <MDateTimePicker
          value={this.state.value1}
          timeFormat={'HH:mm'}
          onChange={this.onValue1Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
        />
        <p>受控不更新值：value为timestamp类型的2021-9-1 12:5:5</p>
        <MDateTimePicker
          value={new Date('2021-09-01 12:05:05').getTime()}
          onChange={this.onChange}
        />
        <h4>---type为time的情况---</h4>
        <p>受控：value为12:5:5</p>
        <MDateTimePicker
          type={'time'}
          value={this.state.value2}
          placeholder={'选择时间'}
          onChange={this.onValue2Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
        />
        <p>受控不更新值</p>
        <MDateTimePicker
          type={'time'}
          placeholder={'选择时间'}
          value={'12:05:05'}
          onChange={this.onChange}
        />
        <h4>---type为season的情况---</h4>
        <p>受控：value为2012-Q3</p>
        <MDateTimePicker
          type={'season'}
          value={this.state.value3}
          placeholder={'选择季度'}
          onChange={this.onValue3Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
        />
        <p>受控不更新值</p>
        <MDateTimePicker
          type={'season'}
          placeholder={'选择季度'}
          value={'2012-Q3'}
          onChange={this.onChange}
        />
        <h4>---type为halfyear的情况---</h4>
        <p>受控：value为2012-H1</p>
        <MDateTimePicker
          type={'halfyear'}
          value={this.state.value4}
          placeholder={'选择半年度'}
          onChange={this.onValue4Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
        />
        <p>受控不更新值</p>
        <MDateTimePicker
          type={'halfyear'}
          placeholder={'选择半年度'}
          value={'2012-H2'}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 自定义配置

可根据需求配置日期展示格式、时间精度与步长、以及自定义触发器和弹出层样式等

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

export default class MDateTimePickerDemo extends Component {

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }

  render() {
    return (
      <div className={prefixCls}>
        <p>指定展示日期格式（标准日期格式请参照API说明中的格式）</p>
        <MDateTimePicker
          showFormat={'YYYY/MM/DD dd'}
          format={'Date'}
          onChange={this.onChange}
        />
        <p>调整时间精度（精确到秒）</p>
        <MDateTimePicker
          // type={`time`}
          timeFormat={`HH:mm:ss`}
          onChange={this.onChange}
        />
        <p>调整时间精度（只精确到时）</p>
        <MDateTimePicker
          // type={`time`}
          timeFormat={`HH`}
          onChange={this.onChange}
        />
        <p>指定时间步长（始终间隔:2h,分钟间隔:5min,秒间隔:10s）</p>
        <MDateTimePicker
          type={`time`}
          hourStep={2}
          minuteStep={5}
          secondStep={10}
          onChange={this.onChange}
        />
        <p>自定义触发器样式</p>
        <MDateTimePicker
          className={'my-className'}
          style={{ border: '1px solid red' }}
          prefix={'自定义prefix'}
          placeholder={'自定义placeholder'}
          iconName={'Icon-Completed-items'}
          itemProps={{
          }}
          onChange={this.onChange}
        />
        <p>自定义弹层样式</p>
        <MDateTimePicker
          dialogClassName={'my-dialog-className'}
          dialogStyle={{ padding: '0 10px', border: '1px solid red' }}
          dialogProps={{
            placement: 'top'
          }}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 日期范围选择

可根据需求选择一个日期范围

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType, MButton } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  value: DateType[];
  type: any
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-9-1 12:5:5', '2021-9-5 12:5:5'],
      type: 'year'
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType[] })
  }
  changeType = () => {
    console.info('改变type为day')
    this.setState({ type: 'day' })
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <MDateTimePicker
          isRange
          onChange={this.onChange}
        />
        <p>受控</p>
        <MDateTimePicker
          isRange
          value={this.state.value}
          onChange={this.onValueChange}
        />
        <p>受控不更新值</p>
        <MDateTimePicker
          isRange
          value={['2021-9-1 12:5:5', '2021-9-5 12:5:5']}
          onChange={this.onChange}
        />
        <p>其他类型</p>
        <MDateTimePicker
          type={'day'}
          isRange
          onChange={this.onChange}
        />
        <MButton type={'primary'} onClick={this.changeType}>改变type为'day'</MButton>
        <p>使用 type 更改选择器类型</p>
        <MDateTimePicker
          type={this.state.type}
          isRange
          onChange={this.onChange}
        />
        <p>开始和结束日期联动</p>
        <MDateTimePicker
          isRange
          onChange={this.onChange}
          startEndValueLink
        />
        <p>调整时间精度（精确到秒）</p>
        <MDateTimePicker
          isRange
          timeFormat={`HH:mm:ss`}
          onChange={this.onChange}
        />
        <p>调整时间精度（只精确到时）</p>
        <MDateTimePicker
          isRange
          timeFormat={`HH`}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 时间范围选择

可根据需求选择一个日期范围

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  value: DateType[];
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      value: ['12:0:0', '18:0:0'],
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType[] })
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <MDateTimePicker
          isRange
          type={'time'}
          onChange={this.onChange}
        />
        <p>受控</p>
        <MDateTimePicker
          isRange
          type={'time'}
          value={this.state.value}
          onChange={this.onValueChange}
        />
        <p>受控不更新值</p>
        <MDateTimePicker
          isRange
          type={'time'}
          value={['12:0:0', '18:0:0']}
          onChange={this.onChange}
        />
        <p>开始和结束时间联动</p>
        <MDateTimePicker
          isRange
          type={'time'}
          onChange={this.onChange}
          startEndValueLink
        />
      </div>
    )
  }
}
```

### 设定日期限制

设置最大与最小日期

```jsx
import { Component } from "react";
import { constants, DateTimePicker, MDateTimePicker, DatePickerDateType, Select, Switch, Input } from "@weapp/ui";
import { dayjs } from "@weapp/utils"

const { InputNumber } = Input

const options = [
  { id: '0', content: '星期日' },
  { id: '1', content: '星期一' },
  { id: '2', content: '星期二' },
  { id: '3', content: '星期三' },
  { id: '4', content: '星期四' },
  { id: '5', content: '星期五' },
  { id: '6', content: '星期六' },
]

const prefixCls = `${constants.uiPcClsPrefix}-demo-datetimepicker`;

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  minDate?: string
  maxDate?: string
  selectValue?: any[]
  filterHolidays?: boolean
  minRangeSelectDayNumber?: number
  maxRangeSelectDayNumber?: number
}

export default class DateTimePickerDemo extends Component<any, DateTimePickerDemoState> {

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      minDate: '',
      // minDate: '2025-12-25 12:00:00',
      maxDate: '',
      selectValue: [],
      filterHolidays: false,
      // filterHolidays: true,
      minRangeSelectDayNumber: void 0,
      // minRangeSelectDayNumber: 3,
      maxRangeSelectDayNumber: void 0,
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }

  onMinValueChange = (value: DateType | DateType[]) => this.setState({ minDate: value as string })
  onMaxValueChange = (value: DateType | DateType[]) => this.setState({ maxDate: value as string })
  onMinRangeSelectDayNumberChange = (value: any) => this.setState({ minRangeSelectDayNumber: value })
  onMaxRangeSelectDayNumberChange = (value: any) => this.setState({ maxRangeSelectDayNumber: value })
  onSelectChange = (value: any) => this.setState({ selectValue: value })
  onSwitchChange = (value: boolean) => this.setState({ filterHolidays: value })

  getNewDate = () => new Date()

  render() {
    const { minDate, maxDate, selectValue, filterHolidays, minRangeSelectDayNumber, maxRangeSelectDayNumber } = this.state
    return (
      <div className={prefixCls}>
        <h3>自定义控制</h3>
        <p>自定义输入最大最小日期</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最小日期时间：</span>
            <DateTimePicker
              value={minDate}
              onChange={this.onMinValueChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最大日期时间：</span>
            <DateTimePicker
              value={maxDate}
              onChange={this.onMaxValueChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>日期时间展示面板：</span>
            <DateTimePicker
              minDate={minDate}
              timeFormat={'HH'}
              maxDate={maxDate}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置过滤星期：</span>
            <Select
              style={{ width: 200 }}
              data={options}
              multiple
              value={selectValue}
              onChange={this.onSelectChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>自动过滤考勤接口节假日数据：</span>
            <Switch
              value={filterHolidays}
              onChange={this.onSwitchChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置范围选择最小天数：</span>
            <InputNumber
              style={{ width: 200 }}
              value={minRangeSelectDayNumber}
              onChange={this.onMinRangeSelectDayNumberChange}
              min={0}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置范围选择最大天数（优先级较高）：</span>
            <InputNumber
              style={{ width: 200 }}
              value={maxRangeSelectDayNumber}
              onChange={this.onMaxRangeSelectDayNumberChange}
              min={0}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center', color: 'red' }}>测试日期时间：</span>
          </div>
          <MDateTimePicker
            type={'day'}
            onChange={this.onChange}
            minDate={minDate}
            maxDate={maxDate}
            filterWeekdays={selectValue?.map(Number)}
            filterHolidays={filterHolidays}
          />
          <br />
          <MDateTimePicker
            onChange={this.onChange}
            minDate={minDate}
            maxDate={maxDate}
            filterWeekdays={selectValue?.map(Number)}
            filterHolidays={filterHolidays}
          />
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center', color: 'red' }}>测试日期时间范围：</span>
          </div>
          <MDateTimePicker
            type={'day'}
            // type={'month'}
            // type={'year'}
            onChange={this.onChange}
            isRange
            minDate={minDate}
            maxDate={maxDate}
            minRangeSelectDayNumber={minRangeSelectDayNumber}
            maxRangeSelectDayNumber={maxRangeSelectDayNumber}
            filterWeekdays={selectValue?.map(Number)}
            filterHolidays={filterHolidays}
          />
          <br />
          <MDateTimePicker
            onChange={this.onChange}
            isRange
            minDate={minDate}
            maxDate={maxDate}
            minRangeSelectDayNumber={minRangeSelectDayNumber}
            maxRangeSelectDayNumber={maxRangeSelectDayNumber}
            filterWeekdays={selectValue?.map(Number)}
            filterHolidays={filterHolidays}
          />
        </div>
        <br />
        <h3>单个时间点</h3>
        <p>minDate为 动态返回的new Date()</p>
        <MDateTimePicker
          minDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>maxDate为 动态返回的new Date()</p>
        <p>注意：最大日期设为此刻的时候，请传入函数进行动态计算，否则传入的就为组件渲染时候的固定时间</p>
        <MDateTimePicker
          maxDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>minDate为 dayjs().format('YYYY-MM-DD')</p>
        <MDateTimePicker
          minDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>maxDate为 dayjs().format('YYYY-MM-DD')</p>
        <MDateTimePicker
          maxDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>minDate为'2021-06-01 12:30:00'，maxDate为今天 '20:30:00'</p>
        <MDateTimePicker
          minDate={`2021-06-01 12:30:00`}
          maxDate={new Date(`${new Date().toDateString()} 20:30:00`)}
        />
        <br />
        <br />
        <p>timeFormat为 'HH:mm' 时：minDate为'2021-06-01 12:30'，maxDate为今天 '20:30'</p>
        <MDateTimePicker
          timeFormat={'HH:mm'}
          minDate={`2021-06-01 12:30`}
          maxDate={new Date(`${new Date().toDateString()} 20:30`)}
        />
        <br />
        <br />
        <p>传入日期时间不在范围内时，按原数据显示：defaultValue为'2021-5-1 12:00:00'</p>
        <MDateTimePicker
          defaultValue={'2021-5-1 12:00:00'}
          minDate={`2021-06-01 12:00:00`}
          maxDate={new Date(`${new Date().toDateString()} 20:00:00`)}
        />
        <br />
        <br />
        <p>传入日期时间在同一天时：minDate为 今天的12:30，maxDate为 今天的13:50</p>
        <MDateTimePicker
          minDate={new Date(`${new Date().toDateString()} 12:30`)}
          maxDate={new Date(`${new Date().toDateString()} 13:50`)}
        />
        <br />
        <br />
        <p>传入日期时间在同一时间：minDate为 今天的12:30，maxDate为 今天的12:30</p>
        <MDateTimePicker
          minDate={new Date(`${new Date().toDateString()} 12:30`)}
          maxDate={new Date(`${new Date().toDateString()} 12:30`)}
        />
        <br />
        <br />
        <h3>日期范围</h3>
        <h3>注意：即使设置了边界时间，在范围选择面板头部的快捷选择按钮的优先级仍然最高，若想自定义控制最大最小时间的同时想使用头部快捷选择按钮，请使用 customMultiBtnData 来自定义渲染头部快捷按钮</h3>
        <p>minDate为 new Date()</p>
        <MDateTimePicker
          isRange
          minDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>maxDate为 new Date()</p>
        <p>注意：最大日期设为此刻的时候，请传入函数进行动态计算，否则传入的就为组件渲染时候的固定时间</p>
        <MDateTimePicker
          isRange
          maxDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>minDate为 dayjs().format('YYYY-MM-DD')</p>
        <MDateTimePicker
          isRange
          minDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>maxDate为 dayjs().format('YYYY-MM-DD')</p>
        <MDateTimePicker
          isRange
          maxDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>minDate为'2021-06-01 12:30:00'，maxDate为今天 '20:30:00'</p>
        <MDateTimePicker
          isRange
          minDate={`2021-06-01 12:30:00`}
          maxDate={`${new Date(`${new Date().toDateString()} 20:30:00`)}`}
        />
        <br />
        <br />
        <p>timeFormat为 'HH:mm' 时：minDate为'2021-06-01 12:30'，maxDate为今天 '20:30'</p>
        <MDateTimePicker
          isRange
          timeFormat={'HH:mm'}
          minDate={`2021-06-01 12:30`}
          maxDate={new Date(`${new Date().toDateString()} 20:30`)}
        />
        <br />
        <br />
        <p>传入日期时间不在范围内时，按原数据显示：defaultValue为['2021-05-01 12:00:00', '2021-05-31 12:00:00']</p>
        <MDateTimePicker
          isRange
          defaultValue={['2021-05-01 12:00:00', '2021-05-31 12:00:00']}
          minDate={`2021-06-01 12:00:00`}
          maxDate={`${new Date(`${new Date().toDateString()} 20:00:00`)}`}
        />
        <p>传入日期时间在同一天时：minDate为 今天的12:30，maxDate为 今天的13:50</p>
        <MDateTimePicker
          isRange
          minDate={new Date(`${new Date().toDateString()} 12:30`)}
          maxDate={new Date(`${new Date().toDateString()} 13:50`)}
        />
        <br />
        <br />
        <p>传入日期时间在同一时间：minDate为 今天的12:30，maxDate为 今天的12:30</p>
        <MDateTimePicker
          isRange
          minDate={new Date(`${new Date().toDateString()} 12:30`)}
          maxDate={new Date(`${new Date().toDateString()} 12:30`)}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

### 设定时间限制

设置最大与最小时间

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  value: DateType;
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      value: '12:00:00',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType })
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>-----type为time的情况-----</h4>
        <p>minDate为'12:13:14'，maxDate为'16:17:18'</p>
        <MDateTimePicker
          type={`time`}
          minDate={`12:13:14`}
          maxDate={`16:17:18`}
          onChange={this.onChange}
        />
        <p>受控：传入的value为'12:00:00'</p>
        <MDateTimePicker
          type={`time`}
          value={this.state.value}
          minDate={`12:13:14`}
          maxDate={`16:17:18`}
          onChange={this.onValueChange}
        />
      </div>
    )
  }
}
```

### 快捷选择模式

可根据需求选择日期快速切换模式

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

export default class MDateTimePickerDemo extends Component<any> {

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }

  render() {
    return (
      <div className={prefixCls}>
        <p>带快捷选择</p>
        <MDateTimePicker
          isQuick
          onChange={this.onChange}
        />
        <p>带时间步长的快捷选择：秒钟间隔为5s</p>
        <MDateTimePicker
          isQuick
          type={'time'}
          secondStep={5}
          onChange={this.onChange}
        />
        <p>指定展示日期格式（标准日期格式请参照API说明中的格式）</p>
        <MDateTimePicker
          isQuick
          showFormat={'YYYY/MM/DD dd'}
          format={'Date'}
          onChange={this.onChange}
        />
        <p>禁用</p>
        <MDateTimePicker
          isQuick
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          disabled
        />
        <p>只读</p>
        <MDateTimePicker
          isQuick
          defaultValue={new Date('2021-09-01 12:05:05').getTime()}
          readOnly
        />
      </div>
    )
  }
}
```

### selectedKey 和 value 受控

可自定义配置受控变量

```jsx
import { Component } from "react";
import { dayjs } from '@weapp/utils'
import { constants, MDateTimePicker, MButton, DatePickerDateType, DatePickerPrimaryKeyType, DatePickerMultiBtnDataType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  selectedKeyPrior: boolean;
  selectedKey1: string;
  selectedKey2: string;
  value1: DateType[];
  value2: DateType[];
  value3?: DateType[];
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      selectedKeyPrior: false,
      selectedKey1: 'thisMonth',
      selectedKey2: 'thisMonth',
      value1: [dayjs(), dayjs().add(1, 'day')],
      value2: [dayjs(), dayjs().add(1, 'day')],
      value3: undefined,
    }
  }

  onSelectedKey1Change = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    multiBtnData ? console.info('onSelectedKey1Change', value, key, multiBtnData) : console.info('onSelectedKey1Change', value)
    this.setState({ selectedKey1: key || '' })
  }
  onValue1Change = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    key ? console.info('onValue1Change', value, key, multiBtnData) : console.info('onValue1Change', value)
    this.setState({ value1: value as DateType[] })
  }
  onValue2Change = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    key ? console.info('onValue2Change', value, key, multiBtnData) : console.info('onValue2Change', value)
    const newState =  this.state.selectedKeyPrior ? { selectedKey2: key } :{ value2: value  }
    this.setState(newState as any)
  }
  onValue3Change = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    key ? console.info('onValue3Change', value, key, multiBtnData) : console.info('onValue3Change', value)
    this.setState({ value3: value as DateType[] })
  }
  changePrimary = () => { this.setState({ selectedKeyPrior: !this.state.selectedKeyPrior }) }
  changeValue1 = () => { this.setState({ value1: [dayjs().subtract(3, 'day'), dayjs()] }) }
  changeValue2 = () => { this.setState({ value2: [dayjs().subtract(3, 'day'), dayjs()] }) }
  changeSelectedKey1ToLastMonth = () => { this.setState({ selectedKey1: 'lastMonth' }) }
  changeSelectedKey1ToNextMonth = () => { this.setState({ selectedKey1: 'nextMonth' }) }
  changeSelectedKey2ToLastMonth = () => { this.setState({ selectedKey2: 'lastMonth' }) }
  changeSelectedKey2ToNextMonth = () => { this.setState({ selectedKey2: 'nextMonth' }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>1.使用 value 来自定义控制数据</p>
        <MDateTimePicker
          isRange
          value={this.state.value1}
          type={'day'}
          inSearchAdvanced
          onChange={this.onValue1Change}
        />
        <MButton inline type={'primary'} size={'small'} onClick={this.changeValue1}>改变value至最近三天</MButton>
        <p>2.使用 selectedKey 来自定义控制数据</p>
        <MDateTimePicker
          isRange
          selectedKey={this.state.selectedKey1}
          type={'day'}
          inSearchAdvanced
          onChange={this.onSelectedKey1Change}
        />
        <MButton inline size={'small'} onClick={this.changeSelectedKey1ToLastMonth}>lastMonth</MButton>
        <MButton inline size={'small'} onClick={this.changeSelectedKey1ToNextMonth}>nextMonth</MButton>
        <p>3.当同时存在 selectedKey 和 value 时，优先按 value 的日期处理，可使用 selectedKeyPrior 来改变优先级</p>
        <MButton type={this.state.selectedKeyPrior ? 'danger' : 'primary'} inline size={'small'} onClick={this.changePrimary}>改变selectedKeyPrior 当前优先级: {this.state.selectedKeyPrior ? 'selectedKey' : 'value'}</MButton>
        <MDateTimePicker
          selectedKey={this.state.selectedKey2}
          selectedKeyPrior={this.state.selectedKeyPrior}
          value={this.state.value2}
          type={'day'}
          isRange
          inSearchAdvanced
          onChange={this.onValue2Change}
        />
        <MButton inline type={'primary'} size={'small'} onClick={this.changeValue2}>改变value:最近三天</MButton>
        <MButton inline type={'danger'} size={'small'} onClick={this.changeSelectedKey2ToLastMonth}>改变key:lastMonth</MButton>
        <MButton inline type={'danger'} size={'small'} onClick={this.changeSelectedKey2ToNextMonth}>改变key:nextMonth</MButton>
        <p>4.使用 selectedKey 做初始化，后续采用value做受控</p>
        <MDateTimePicker
          selectedKey={'thisMonth'}
          value={this.state.value3}
          type={'day'}
          isRange
          inSearchAdvanced
          onChange={this.onValue3Change}
        />
      </div>
    )
  }
}
```

### dateMode模式

支持只选择日期模式

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  value1: DateType;
  value2: DateType;
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      value1: '2021-09-01',
      value2: '2021-09-01 12:05:05'
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValue1Change', value)
    this.setState({ value1: value as DateType })
  }
  onValue2Change = (value: DateType | DateType[]) => {
    console.info('onValue2Change', value)
    this.setState({ value2: value as DateType })
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>受控：value为2021-09-01</p>
        <MDateTimePicker
          openDateMode
          value={this.state.value1}
          type={'day'}
          onChange={this.onValue1Change}
        />
        <p>受控：value为2021-09-01 12:05:05</p>
        <MDateTimePicker
          openDateMode
          value={this.state.value2}
          type={'day'}
          onChange={this.onValue2Change}
        />
        <p>受控不更新值：value为timestamp类型的2021-9-1 12:5:5</p>
        <MDateTimePicker
          openDateMode
          value={new Date('2021-09-01 12:05:05').getTime()}
          type={'day'}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 自定义控制

自定义输入最大最小日期

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType, MSelect, SingleType, SelectValueType, SelectOptionData } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

const options = [
  { id: 'date', content: '日期时间' },
  { id: 'year', content: '年' },
  { id: 'month', content: '月' },
  { id: 'day', content: '日' },
  { id: 'time', content: '时间' },
  { id: 'season', content: '季度' },
  { id: 'halfyear', content: '半年度' },
];

export default class MDateTimePickerDemo extends Component {

  state = {
    minDate: '',
    maxDate: ''
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onMinValueChange = (value: DateType | DateType[]) => this.setState({ minDate: value as string })
  onMaxValueChange = (value: DateType | DateType[]) => this.setState({ maxDate: value as string })
  render() {
    const { minDate, maxDate } = this.state
    return (
      <div className={prefixCls}>
        <p>自定义输入最大最小日期</p>
        <div>
          <span style={{ display: 'flex', alignItems: 'center' }}>设置最小日期时间：</span>
          <MDateTimePicker
            onChange={this.onMinValueChange}
            value={minDate}
          />
        </div>
        <div>
          <span style={{ display: 'flex', alignItems: 'center' }}>设置最大日期时间：</span>
          <MDateTimePicker
            onChange={this.onMaxValueChange}
            value={maxDate}
          />
        </div>

        <div>
          <span style={{ display: 'flex', alignItems: 'center' }}>日期时间展示面板：</span>
          <MDateTimePicker
            minDate={minDate}
            maxDate={maxDate}
          />
        </div>

        <div>
          <span style={{ display: 'flex', alignItems: 'center' }}>范围展示面板：</span>
          <MDateTimePicker
            minDate={minDate}
            maxDate={maxDate}
            isRange
          />
        </div>

      </div>
    )
  }
}
```

### format日期格式转换

自定义日期格式转换

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType, MSelect, SingleType, SelectValueType, SelectOptionData } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

const options = [
  { id: 'date', content: '日期时间' },
  { id: 'year', content: '年' },
  { id: 'month', content: '月' },
  { id: 'day', content: '日' },
  { id: 'time', content: '时间' },
  { id: 'season', content: '季度' },
  { id: 'halfyear', content: '半年度' },
];

export default class MDateTimePickerDemo extends Component {

  state = {
    type: void 0
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  handleSelect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('selected:', value, option);
    this.setState({ type: value })
  }
  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <p>format=='Date'</p>
        <MDateTimePicker
          onChange={this.onChange}
          format={`Date`}
        />
        <p>format=='YYYY/MM/DD HH:mm:ss'</p>
        <MDateTimePicker
          onChange={this.onChange}
          format={'YYYY/MM/DD HH:mm:ss'}
        />
        <p>format=='timestamp'</p>
        <MDateTimePicker
          onChange={this.onChange}
          format={`timestamp`}
        />

      </div>
    )
  }
}
```

### format日期格式转换(受控)

自定义日期格式转换

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  visible: boolean;
  value1: DateType | null;
  value2: DateType;
  value3: DateType;
  value4: DateType;
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      visible: false,
      value1:new Date(),
      // value1: null,
      value2: '2021-9-1 12:5:5',
      value3: 1717264800000,
      value4: '2012-H1',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValue1Change', value)
    this.setState({ value1: value as DateType })
  }
  onValue2Change = (value: DateType | DateType[]) => {
    console.info('onValue2Change', value)
    this.setState({ value2: value as DateType })
  }
  onValue3Change = (value: DateType | DateType[]) => {
    console.info('onValue3Change', value)
    this.setState({ value3: value as DateType })
  }
  onValue4Change = (value: DateType | DateType[]) => {
    console.info('onValue4Change', value)
    this.setState({ value4: value as DateType })
  }
  onDialogOpen = (value: DateType | DateType[]) => { console.info('onDialogOpen', value) }
  onDialogClose = (value: DateType | DateType[]) => { console.info('onDialogClose', value) }

  render() {
    return (
      <div className={prefixCls}>
        <p>受控：value为new Date()</p>
        <p>format=='Date'</p>
        <MDateTimePicker
          value={this.state.value1}
          onChange={this.onValue1Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
          format={`Date`}
        />
        <p>受控：value为2021-9-1 12:5:5</p>
        <p>format=='YYYY/MM/DD HH:mm:ss'</p>
        <MDateTimePicker
          value={this.state.value2}
          onChange={this.onValue2Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
          format={'YYYY/MM/DD HH:mm:ss'}
        />
        <p>format=='timestamp'</p>
        <MDateTimePicker
          value={this.state.value3}
          onChange={this.onValue3Change}
          onDialogOpen={this.onDialogOpen}
          onDialogClose={this.onDialogClose}
          format={`timestamp`}
        />
      </div>
    )
  }
}
```

### 快捷选择上/下午与全天

可通过后台设置或前端传入数据来配置

```jsx
import { Component } from "react";
import { constants, MDateTimePicker, DatePickerDateType, MButton } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-m-datetimepicker`;

type DateType = DatePickerDateType

type MDateTimePickerDemoState = {
  value: DateType[];
}

export default class MDateTimePickerDemo extends Component<any, MDateTimePickerDemoState> {

  constructor(props: MDateTimePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-9-1 12:5:5', '2021-9-5 12:5:5'],
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType[] })
  }
  reset = () => { this.setState({ value: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>默认读取后台配置数据</p>
        <MDateTimePicker
          isRange
          inSearchAdvanced
          onChange={this.onChange}
        />
        <p>自定义传入数据</p>
        <MDateTimePicker
          isRange
          inSearchAdvanced
          onChange={this.onChange}
          showRangeAllDayRadio
          rangeAllDayStartTime={'09:00'}
          noonBreakStartTime={'12:00'}
          noonBreakEndTime={'14:00'}
          rangeAllDayEndTime={'17:00'}
        />
        <br />
        <br />
        <p>受控，value为['2021-9-1 12:5:5', '2021-9-5 12:5:5']</p>
        <MDateTimePicker
          isRange
          inSearchAdvanced
          value={this.state.value}
          onChange={this.onValueChange}
          showRangeAllDayRadio
          rangeAllDayStartTime={'09:00'}
          noonBreakStartTime={'12:00'}
          noonBreakEndTime={'14:00'}
          rangeAllDayEndTime={'17:00'}
        />
        <MButton type={'primary'} size={'small'} onClick={this.reset}>重置</MButton>
      </div>
    )
  }
}
```

### 中文日期格式

中文日期格式

```jsx
import { Component } from "react";
import { constants, MDateTimePicker } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-datepicker`;

type Props = {}
type State = {}

export default class Demo extends Component<Props, State> {

  constructor(props: Demo) {
    super(props)
    this.state = {

    }
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <MDateTimePicker
          defaultValue={'12:13:14'}
          type={'time'}
          chineseFormatParams={{
            type: 'date',
            dateFormatAry: ['H', 'm', 's']
          }}
        />
        <br />
        <br />
        <MDateTimePicker
          defaultValue={new Date()}
          chineseFormatParams={{
            type: 'date',
            dateFormatAry: ['Y', 'M', 'D', 'H', 'm']
          }}
        />
        <br />
        <br />
        <MDateTimePicker
          defaultValue={new Date()}
          chineseFormatParams={{
            type: 'week',
            // weekPrefix: '周'
          }}
        />
        <br />
        <br />
        <MDateTimePicker
          defaultValue={new Date()}
          chineseFormatParams={{
            type: 'week',
            weekPrefix: ''
          }}
        />
      </div >
    )
  }
}
```

## API

### 注意：

```
1.当存在最大最小日期或者自定义配置日期过滤方法时，不限开始日期与不限结束日期按钮无法点击
2.当点击范围选择快捷选择按钮时，即使设置了最大最小日期或自定义日期过滤方法，也会优先按此按钮的日期处理
3.当同时传入了当前快捷选择的变量selectKey和value时，会优先按value的日期处理，可通过selectedKeyPrior来改变优先级
4.移动端需要配置快捷按钮或者需要在高级搜索中使用的时候
5.移动端的dateMode模式只有在 type 为 'day' 时才会生效，且当传入值为标准 'YYYY-MM-DD HH:mm:ss' 或 'YYYY-MM-DD HH:mm'(timeFormat设定为'HH:mm'时生效) 格式时，会按照type 为 'date' 时自动处理
```

### 类型说明：（请从@weapp/ui 中导出）

```typescript
1.日期类型
type DatePickerDateType = string | number | Date ｜Dayjs;
2.原生范围快捷按钮变量名类型
type DatePickerPrimaryKeyType =
  'today' | 'yesterday' | 'tomorrow' |
  'thisWeek' | 'lastWeek' | 'nextWeek' |
  'thisMonth' | 'lastMonth' | 'nextMonth' |
  'thisSeason' | 'lastSeason' | 'nextSeason' |
  'thisYear' | 'lastYear' | 'nextYear' | 'firstHalfYear' | 'nextHalfYear';
3.自定义范围快捷选择按钮数据类型
type DatePickerMultiBtnDataType = {
  type: string;
  title: string;
  startDate: DateType | Dayjs | ((value: DateType | Dayjs) => DateType | Dayjs);
  endDate: DateType | Dayjs | ((value: DateType | Dayjs) => DateType | Dayjs);
}
```

```typescript
1.日期类型
type DatePickerDateType = string | number | Date ｜Dayjs;
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| disabled | 选择器是否禁用 | boolean | 否 | false |
| readOnly | 选择器是否完全只读 | boolean | 否 | false |
| navItemProps | 高级搜索模式顶部触发器的 props | 参考 form-item 组件的 props | 否 |  |
| itemProps | 触发器的 props | 参考 form-item 组件的 props | 否 |  |
| dialogProps | 弹出层的 props | 参考移动端 dialog 组件的 props | 否 |  |
| className | 弹出面板自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| dialogClassName | 自定义类名 | string | 否 |  |
| dialogStyle | 自定义样式 | CSSProperties | 否 |  |
| customRenderSelectedValue | 自定义渲染展示选中日期 | (templateCom: ReactNode, value: string) => ReactNode | 否 |  |
| prefix | 前缀 | string / ReactNode | 否 |  |
| iconName | 后缀 icon | icon 组件的 iconNames / ''(不想展示 icon 请传'') | 否 | false |
| type | 选择器类型 | 'date' / 'time' / 'day' / 'month' / 'year' / 'season' / 'halfyear' | 否 | 'date' |
| timeFormat | 时间精度 | 'HH:mm:ss' / 'HH:mm' | 否 | 'HH:mm:ss' |
| visible | 面板的展开与隐藏 | boolean | 否 |  |
| value | 日期时间受控值 | DatePickerDateType / DatePickerDateType[] | 否 |  |
| defaultValue | 日期时间默认值 | DatePickerDateType / DatePickerDateType[] | 否 |  |
| format | 指定抛出数据格式 | 自定义标准日期格式 string / 'timestamp' / 'Date' | 否 | YYYY-MM-DD HH:mm(:ss) |
| showFormat | 显示在输入框中的格式 | 自定义标准日期格式 string(详情请参照下方格式化占位符列表) | 否 |  |
| hourStep | 时的步长 | number | 否 | 1 |
| minuteStep | 分的步长 | number | 否 | 1 |
| secondStep | 秒的步长 | number | 否 | 1 |
| minDate | 最小日期 | DatePickerDateType | 否 | 1500-01-01 |
| maxDate | 最大日期 | DatePickerDateType | 否 | 2500-01-01 |
| customDateFilter | 自定义日期过滤 | (value: DatePickerDateType / DatePickerDateType[]) => boolean 参数为当前日期，要求返回 boolean | 否 |  |
| showClear | 是否显示清除按钮 | boolean | 否 | true |
| placeholder | 单个选择占位符 | string | 否 |  |
| startPlaceholder | 范围选择开始占位符 | string | 否 |  |
| endPlaceholder | 范围选择结束占位符 | string | 否 |  |
| primaryKey | 原生范围快捷选择按钮配置参数 | DatePickerPrimaryKeyType[] | 否 |  |
| isRange | 是否为范围选择 | boolean | 否 | false |
| weekStart | 每周的开始天 | number (0 代表周天 6 代表周六) | 否 | 1 |
| showMultiBtnGroup | 是否显示范围面板头部快捷选择栏 | boolean | 否 | true |
| customMultiBtnData | 头部自定义快捷按钮渲染(isRange 且 type 为 day 时生效) | DatePickerMultiBtnDataType[] | 否 |  |
| selectedKey | 当前快捷选择的变量 | PrimaryKeyType / string | 否 |  |
| selectedKeyPrior | 改变快捷选择和value的优先级 | boolean | 否 | false |
| onChange | 选中值改变时的回调 | (value: DatePickerDateType / DatePickerDateType[], key: DatePickerPrimaryKeyType / string, multiBtnData?: DatePickerMultiBtnDataType) => {} | 否 |  |
| onClear | 清空值时的回调 | () => {} | 否 |  |
| onCancel | 取消选择的回调 | ()=>{} | 否 |  |
| onDialogOpen | 弹层展开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onDialogClose | 弹层关闭时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| columnHeight | 每一列的高度 | number | 否 | 324 |
| itemHeight | 每一列单个 item 的高度 | number | 否 | 44 |
| startEndValueLink | 范围选择时，开始和结束日期是否联动 | boolean | 否 | false |
| isLocale | 是否开启国际化 | boolean | 否 | true |
| showRangeAllDayRadio | 是否展示快捷选择“上午”、“下午”、“全天” | boolean | 否 |  |
| rangeAllDayStartTime | 全天开始时间 | boolean | 否 |  |
| rangeAllDayEndTime | 全天结束时间 | boolean | 否 |  |
| noonBreakStartTime | 午休开始时间 | boolean | 否 |  |
| noonBreakEndTime | 午休结束时间 | boolean | 否 |  |
| useCalendarView | 是否采用新版本日历视图选择模式 | boolean | 否 |  |
| inForm | 只读模式下是否采用表单只读模式 | boolean | 否 |  |
| selectedWrap | 表单只读模式下是否换行 | boolean | 否 |  |
### 格式化占位符列表：

| 占位符 | 输出 | 详情 |
| --- | --- | --- |
| `YY` | 18 | 两位数的年份 |
| `YYYY` | 2018 | 四位数的年份 |
| `M` | 1-12 | 月份，从 1 开始 |
| `MM` | 01-12 | 月份，两位数 |
| `MMM` | Jan-Dec | 缩写的月份名称 |
| `MMMM` | January-December | 完整的月份名称 |
| `D` | 1-31 | 月份里的一天 |
| `DD` | 01-31 | 月份里的一天，两位数 |
| `d` | 0-6 | 一周中的一天，星期天是 0 |
| `dd` | Su-Sa | 最简写的星期几 |
| `ddd` | Sun-Sat | 简写的星期几 |
| `dddd` | Sunday-Saturday | 星期几 |
| `H` | 0-23 | 小时 |
| `HH` | 00-23 | 小时，两位数 |
| `h` | 1-12 | 小时, 12 小时制 |
| `hh` | 01-12 | 小时, 12 小时制, 两位数 |
| `m` | 0-59 | 分钟 |
| `mm` | 00-59 | 分钟，两位数 |
| `s` | 0-59 | 秒 |
| `ss` | 00-59 | 秒 两位数 |
| `SSS` | 000-999 | 毫秒 三位数 |
| `Z` | +05:00 | UTC 的偏移量，±HH:mm |
| `ZZ` | +0500 | UTC 的偏移量，±HHmm |
| `A` | AM PM |  |
| `a` | am pm |  |
#### 支持的本地化格式列表

| 占位符 | 英语语言 | 示例输出 |
| --- | --- | --- |
| `LT` | h:mm A | 8:02 PM |
| `LTS` | h:mm:ss A | 8:02:18 PM |
| `L` | MM/DD/YYYY | 08/16/2018 |
| `LL` | MMMM D, YYYY | August 16, 2018 |
| `LLL` | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM |
| `LLLL` | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM |
| `l` | M/D/YYYY | 8/16/2018 |
| `ll` | MMM D, YYYY | Aug 16, 2018 |
| `lll` | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM |
| `llll` | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM |
