# DateTimePicker 日期时间选择器

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

## 代码演示

### 日期和时间点

在同一个选择器里选择日期和时间

```jsx
import { Component, CSSProperties } from "react";
import { constants, DateTimePicker, Button, DatePickerDateType, DatePicker } from "@weapp/ui";

const { getLocaleDateTime, getWindowDateTimeShowFormat } = DatePicker
const prefixCls = `${constants.uiPcClsPrefix}-demo-datetimepicker`;

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType | null;
  customValue: DateType;
  popupVisible: boolean;
  datetimeformat?: string;
}

const style: CSSProperties = {
  width: '100%',
  height: '100%',
  fontSize: '14px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#666666'
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: '2021-9-1 12:5:5',
      // value: null,
      customValue: '2021-1-1 12:5:5',
      popupVisible: false
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onClick = () => { this.setState(({ popupVisible }) => ({ popupVisible: !popupVisible })) }
  customRender = (_this: any, content: any) => {
    return <div
      style={style}
      onClick={this.onClick}>{getLocaleDateTime(this.state.customValue)}</div>
  }
  customRenderChange = (value: DateType | DateType[]) => {
    console.info('customRenderChange', value)
    this.setState({
      customValue: value as string,
      popupVisible: false
    })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  getWindowDateTimeShowFormat = () => { this.setState({ datetimeformat: getWindowDateTimeShowFormat() }) }
  onInputClick = (e: React.MouseEvent) => console.info('click', e)
  onInputFocus = (e: React.ReactText) => console.info('focus', e)
  onInputBlur = (e: React.ReactText) => console.info('blur', e)

  render() {

    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DateTimePicker
          panelType={'trigger'}
          defaultValue={new Date()}
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
          showFormat={'YYYY-MM-DD HH:mm:ss A'}
        />
        <br />
        <br />
        <p>禁用</p>
        <DateTimePicker
          panelType={'trigger'}
          disabled
          defaultValue={`2021-01-12 8:5:5`}
        />
        <br />
        <br />
        <p>只读</p>
        <DateTimePicker
          panelType={'trigger'}
          readOnly
          defaultValue={`2021-01-12 8:5:5`}
        />
        <br />
        <br />
        <p>受控：value为2021-9-1 12:5:5</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            panelType={'trigger'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2021-09-01 12:05</p>
        <DateTimePicker
          panelType={'trigger'}
          value={new Date('2021-09-01 12:05').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DateTimePicker
          panelType={'trigger'}
          format={`Date`}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY HH:mm:ss'}</p>
        <DateTimePicker
          panelType={'trigger'}
          onChange={this.onChange}
          defaultValue={new Date()}
          timeFormat={'HH:mm:ss'}
          showFormat={'DD/MM/YYYY HH:mm:ss'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY ss:mm:HH'}</p>
        <DateTimePicker
          panelType={'trigger'}
          onChange={this.onChange}
          defaultValue={new Date()}
          timeFormat={'HH:mm:ss'}
          showFormat={'MM.DD.YYYY ss:mm:HH'}
        />
        <br />
        <br />
        <p>根据组件内部抛出的方法耦合个人设置中配置的 datetimeformat </p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            panelType={'trigger'}
            onChange={this.onChange}
            defaultValue={new Date()}
            timeFormat={'HH:mm:ss'}
            showFormat={this.state.datetimeformat}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.getWindowDateTimeShowFormat}>获取window中的datetimeformat</Button>
        </div>
        <br />
        <p>使用 weekStart 更改每周的开始天</p>
        <DateTimePicker
          panelType={'trigger'}
          weekStart={3}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 timeFormat 控制时间精度（精确到秒）</p>
        <DateTimePicker
          panelType={'trigger'}
          placeholder={`精确到秒`}
          timeFormat={'HH:mm:ss'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 timeFormat 控制时间精度（只精确到时）</p>
        <DateTimePicker
          panelType={'trigger'}
          placeholder={`精确到时`}
          timeFormat={'HH'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 defaultTime 指定时间框渲染的默认时间：defaultTime为6:5:5（如果时间非法或者传入defaultTime='null'，默认渲染为0点的值）</p>
        <DateTimePicker
          panelType={'trigger'}
          defaultTime={'6:5:5'}
          timeFormat={'HH:mm:ss'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 hourStep minuteStep secondStep 调整时间步长</p>
        <DateTimePicker
          panelType={'trigger'}
          timeFormat={'HH:mm:ss'}
          hourStep={2}
          minuteStep={5}
          secondStep={10}
        />
        <br />
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <DateTimePicker
          panelType={'trigger'}
          bindTriggerContainer
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <DateTimePicker
          panelType={'trigger'}
          placeholder={'自定义placeholder'}
          className={'date-time-picker-demo'}
          popupVisible={this.state.popupVisible}
          width={500}
          style={{
            border: '1px solid red',
            height: '30px'
          }}
          customRender={this.customRender}
          onChange={this.customRenderChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DateTimePicker
          panelType={'trigger'}
          defaultValue={`2021-01-12 8:5:5`}
          allowClear={false}
        />
        <p>宽度不够时</p>
        <DateTimePicker
          panelType={'trigger'}
          width={100}
          defaultValue={`2021-01-12 8:5:5`}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <DateTimePicker
          panelType={'trigger'}
          needMaxWidth={false}
          defaultValue={`2021-01-12 8:5:5`}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <DateTimePicker
          panelType={'trigger'}
          maxWidth={400}
          defaultValue={`2021-01-12 8:5:5`}
        />
      </div >

    )
  }
}
```

### 日期和时间点(平铺模式)

在同一个选择器里选择日期和时间

```jsx
import { Component, CSSProperties } from "react";
import { constants, DateTimePicker, Button, DatePickerDateType, DatePicker } from "@weapp/ui";

const { getLocaleDateTime, getWindowDateTimeShowFormat } = DatePicker
const prefixCls = `${constants.uiPcClsPrefix}-demo-datetimepicker`;

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType | null;
  customValue: DateType;
  popupVisible: boolean;
  datetimeformat?: string;
}

const style: CSSProperties = {
  width: '100%',
  height: '100%',
  fontSize: '14px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#666666'
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: '2021-9-1 12:5:5',
      // value: null,
      customValue: '2021-1-1 12:5:5',
      popupVisible: false
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onClick = () => { this.setState(({ popupVisible }) => ({ popupVisible: !popupVisible })) }
  customRender = (_this: any, content: any) => {
    return <div
      style={style}
      onClick={this.onClick}>{getLocaleDateTime(this.state.customValue)}</div>
  }
  customRenderChange = (value: DateType | DateType[]) => {
    console.info('customRenderChange', value)
    this.setState({
      customValue: value as string,
      popupVisible: false
    })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  getWindowDateTimeShowFormat = () => { this.setState({ datetimeformat: getWindowDateTimeShowFormat() }) }
  onInputClick = (e: React.MouseEvent) => console.info('click', e)
  onInputFocus = (e: React.ReactText) => console.info('focus', e)
  onInputBlur = (e: React.ReactText) => console.info('blur', e)

  render() {

    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DateTimePicker
          defaultValue={new Date()}
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>禁用</p>
        <DateTimePicker
          disabled
          defaultValue={`2021-01-12 8:5:5`}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>只读</p>
        <DateTimePicker
          readOnly
          defaultValue={`2021-01-12 8:5:5`}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>受控：value为2021-9-1 12:5:5</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
            panelType={'flat'}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2021-09-01 12:05</p>
        <DateTimePicker
          value={new Date('2021-09-01 12:05').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DateTimePicker
          format={`Date`}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY HH:mm:ss'}</p>
        <DateTimePicker
          onChange={this.onChange}
          defaultValue={new Date()}
          timeFormat={'HH:mm:ss'}
          showFormat={'DD/MM/YYYY HH:mm:ss'}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY ss:mm:HH'}</p>
        <DateTimePicker
          onChange={this.onChange}
          defaultValue={new Date()}
          timeFormat={'HH:mm:ss'}
          showFormat={'MM.DD.YYYY ss:mm:HH'}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>根据组件内部抛出的方法耦合个人设置中配置的 datetimeformat </p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            onChange={this.onChange}
            defaultValue={new Date()}
            timeFormat={'HH:mm:ss'}
            showFormat={this.state.datetimeformat}
            panelType={'flat'}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.getWindowDateTimeShowFormat}>获取window中的datetimeformat</Button>
        </div>
        <br />
        <p>使用 weekStart 更改每周的开始天</p>
        <DateTimePicker
          weekStart={3}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 timeFormat 控制时间精度（精确到秒）</p>
        <DateTimePicker
          timeFormat={'HH:mm:ss'}
          placeholder={`精确到秒`}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 timeFormat 控制时间精度（只精确到时）</p>
        <DateTimePicker
          timeFormat={'HH'}
          placeholder={`精确到时`}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 defaultTime 指定时间框渲染的默认时间：defaultTime为6:5:5（如果时间非法或者传入defaultTime='null'，默认渲染为0点的值）</p>
        <DateTimePicker
          defaultTime={'6:5:5'}
          timeFormat={'HH:mm:ss'}
          onChange={this.onChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 hourStep minuteStep secondStep 调整时间步长</p>
        <DateTimePicker
          timeFormat={'HH:mm:ss'}
          hourStep={2}
          minuteStep={5}
          secondStep={10}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <DateTimePicker
          bindTriggerContainer
          panelType={'flat'}
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <DateTimePicker
          placeholder={'自定义placeholder'}
          className={'date-time-picker-demo'}
          popupVisible={this.state.popupVisible}
          width={500}
          style={{
            border: '1px solid red',
            height: '30px'
          }}
          customRender={this.customRender}
          onChange={this.customRenderChange}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DateTimePicker
          defaultValue={`2021-01-12 8:5:5`}
          allowClear={false}
          panelType={'flat'}
        />
        <p>宽度不够时</p>
        <DateTimePicker
          width={100}
          defaultValue={`2021-01-12 8:5:5`}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <DateTimePicker
          needMaxWidth={false}
          defaultValue={`2021-01-12 8:5:5`}
          panelType={'flat'}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <DateTimePicker
          maxWidth={400}
          defaultValue={`2021-01-12 8:5:5`}
          panelType={'flat'}
        />
      </div >
    )
  }
}
```

### 日期和时间范围

在同一个选择器里选择日期和时间范围

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

const { getWindowDateTimeShowFormat } = DatePicker

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

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType[];
  datetimeformat?: string;
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-6-1 12:12:00', new Date()],
      // value: ['', ''],
      // value: [new Date(), ''],
      // value: [],
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType[] })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: [] }) }
  onClear = () => { console.info('onClear') }
  getWindowDateTimeShowFormat = () => { this.setState({ datetimeformat: getWindowDateTimeShowFormat() }) }
  onInputClick = (e: React.MouseEvent, type?: 'start' | 'end') => console.info('click', e, type)
  onInputFocus = (e: React.ReactText, type?: 'start' | 'end') => console.info('focus', e, type)
  onInputBlur = (e: React.ReactText, type?: 'start' | 'end') => console.info('blur', e, type)

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DateTimePicker
          isRange
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
        />
        <br />
        <br />
        <p>禁用</p>
        <DateTimePicker
          isRange
          defaultValue={['2021-9-1 12:12:00', '2021-9-8 13:5:5']}
          disabled
        />
        <br />
        <br />
        <p>只读</p>
        <DateTimePicker
          isRange
          defaultValue={['', new Date()]}
          readOnly
        />
        <br />
        <br />
        <p>受控：value为['2021-6-1 12:12:00', new Date()]</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            isRange
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
            onClear={this.onClear}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <br />
        <p>范围受控不更新值：value为timestamp类型的['2021-6-1 12:12:00', new Date()]</p>
        <DateTimePicker
          isRange
          value={[new Date('2021-6-1 12:12:00').getTime(), new Date().getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>范围日期变动时是否改变当前选中的时间</p>
        <DateTimePicker
          isRange
          defaultValue={[new Date('2021-6-1 12:12:00').getTime(), new Date().getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
          rangeDateChangeRemainLastTime
        />
        <br />
        <br />
        <p>不限开始与不限结束</p>
        <DateTimePicker
          isRange
          defaultValue={['', '']}
        />
        <br />
        <br />
        <p>只限开始</p>
        <DateTimePicker
          isRange
          defaultValue={[new Date(), '']}
        />
        <br />
        <br />
        <p>只限结束</p>
        <DateTimePicker
          isRange
          defaultValue={['', new Date()]}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DateTimePicker
          isRange
          format={'Date'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY HH:mm:ss'}</p>
        <DateTimePicker
          isRange
          onChange={this.onChange}
          defaultValue={[new Date(), new Date()]}
          showFormat={'DD/MM/YYYY HH:mm:ss'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY ss:mm:HH'}</p>
        <DateTimePicker
          isRange
          onChange={this.onChange}
          defaultValue={[new Date(), new Date()]}
          showFormat={'MM.DD.YYYY ss:mm:HH'}
        />
        <br />
        <br />
        <p>根据组件内部抛出的方法耦合个人设置中配置的 datetimeformat </p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            isRange
            onChange={this.onChange}
            defaultValue={[new Date(), new Date()]}
            showFormat={this.state.datetimeformat}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.getWindowDateTimeShowFormat}>获取window中的datetimeformat</Button>
        </div>
        <br />
        <p>使用 timeFormat 控制时间精度（精确到秒）</p>
        <DateTimePicker
          isRange
          timeFormat={`HH:mm:ss`}
        />
        <br />
        <br />
        <p>使用 timeFormat 控制时间精度（只精确到时）</p>
        <DateTimePicker
          isRange
          timeFormat={`HH`}
        />
        <br />
        <br />
        <p>使用 showUnlimit 隐藏底部不限日期选择栏</p>
        <DateTimePicker
          isRange
          showUnlimit={false}
        />
        <br />
        <br />
        <p>使用 hourStep minuteStep secondStep 调整时间步长</p>
        <DateTimePicker
          isRange
          hourStep={2}
          minuteStep={5}
          secondStep={10}
        />
        <br />
        <br />
        <p>自定义className、style与triggerProps</p>
        <div style={{ float: 'right' }}>
          <DateTimePicker
            isRange
            startPlaceholder={`占位符1`}
            endPlaceholder={`占位符2`}
            className={'date-picker-demo'}
            style={{ border: '1px solid red' }}
            triggerProps={{ popupPlacement: 'left' }}
          />
        </div>
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DateTimePicker
          isRange
          defaultValue={['2021-9-1 12:12:00', '2021-9-8 13:5:5']}
          allowClear={false}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <DateTimePicker
          isRange
          defaultValue={['2021-9-1 12:12:00', '2021-9-8 13:5:5']}
          width={200}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <DateTimePicker
          isRange
          defaultValue={['2021-9-1 12:12:00', '2021-9-8 13:5:5']}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <DateTimePicker
          isRange
          defaultValue={['2021-9-1 12:12:00', '2021-9-8 13:5:5']}
          maxWidth={500}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

### 设置边界时间

自定义控制最大最小值

```jsx
import { Component } from "react";
import { constants, DateTimePicker, 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: '',
      maxDate: '',
      selectValue: [],
      filterHolidays: false,
      minRangeSelectDayNumber: void 0,
      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>
            <DateTimePicker
              onChange={this.onChange}
              panelType={'flat'}
              minDate={minDate}
              maxDate={maxDate}
              filterWeekdays={selectValue?.map(Number)}
              filterHolidays={filterHolidays}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center', color: 'red' }}>测试日期时间范围：</span>
            <DateTimePicker
              onChange={this.onChange}
              isRange
              minDate={minDate}
              maxDate={maxDate}
              filterWeekdays={selectValue?.map(Number)}
              filterHolidays={filterHolidays}
              minRangeSelectDayNumber={minRangeSelectDayNumber}
              maxRangeSelectDayNumber={maxRangeSelectDayNumber}
            />
          </div>
        </div>
        <br />
        <h3>单个时间点</h3>
        <p>minDate为 动态返回的new Date()</p>
        <DateTimePicker
          minDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>maxDate为 动态返回的new Date()</p>
        <p>注意：最大日期设为此刻的时候，请传入函数进行动态计算，否则传入的就为组件渲染时候的固定时间</p>
        <DateTimePicker
          maxDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>minDate为 dayjs().format('YYYY-MM-DD')</p>
        <DateTimePicker
          minDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>maxDate为 dayjs().format('YYYY-MM-DD')</p>
        <DateTimePicker
          maxDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>minDate为'2021-06-01 12:30:00'，maxDate为今天 '20:30:00'</p>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          isRange
          minDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>maxDate为 new Date()</p>
        <p>注意：最大日期设为此刻的时候，请传入函数进行动态计算，否则传入的就为组件渲染时候的固定时间</p>
        <DateTimePicker
          isRange
          maxDate={this.getNewDate}
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>minDate为 dayjs().format('YYYY-MM-DD')</p>
        <DateTimePicker
          isRange
          minDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>maxDate为 dayjs().format('YYYY-MM-DD')</p>
        <DateTimePicker
          isRange
          maxDate={dayjs().format('YYYY-MM-DD')}
        />
        <br />
        <br />
        <p>minDate为'2021-06-01 12:30:00'，maxDate为今天 '20:30:00'</p>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          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>
        <DateTimePicker
          isRange
          minDate={new Date(`${new Date().toDateString()} 12:30`)}
          maxDate={new Date(`${new Date().toDateString()} 12:30`)}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

### dateMode模式

支持只选择日期模式

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

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

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType;
  value1: DateType;
  value2: DateType;
  value3: DateType;
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: '2021-10-22',
      value1: '2021-10-22 12:05:05',
      value2: '2021-10-22',
      value3: '2021-10-22 12:05',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValue1Change', value)
    this.setState({ value1: value as string })
  }
  onValue2Change = (value: DateType | DateType[]) => {
    console.info('onValue2Change', value)
    this.setState({ value2: value as string })
  }
  onValue3Change = (value: DateType | DateType[]) => {
    console.info('onValue3Change', value)
    this.setState({ value3: value as string })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  reset1 = () => { this.setState({ value1: '' }) }
  reset2 = () => { this.setState({ value2: '' }) }
  reset3 = () => { this.setState({ value3: '' }) }

  render() {
    return (
      <div className={prefixCls}>
        <h2>请注意:在dateMode模式下，传入的值如果严格满足['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm']格式，则会默认展开时间框</h2>
        <h3>type为 'HH:mm:ss' 模式</h3>
        <p>基础用法</p>
        <DateTimePicker
          onChange={this.onChange}
          openDateMode
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <p>受控：value为'2021-10-22' 面板中的时间选择框默认关闭</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
            openDateMode
            timeFormat={'HH:mm:ss'}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控：value为'2021-10-22 12:05:5' 面板中的时间选择框默认开启</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            value={this.state.value1}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue1Change}
            openDateMode
            timeFormat={'HH:mm:ss'}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset1}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为2021-10-22 12:05:05</p>
        <DateTimePicker
          value={'2021-10-22 12:05:05'}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
          openDateMode
          timeFormat={'HH:mm:ss'}
        />
        <br />
        <br />
        <h3>type为 'HH:mm' 模式</h3>
        <p>基础用法</p>
        <DateTimePicker
          openDateMode
          onChange={this.onChange}
          timeFormat={'HH:mm'}
        />
        <br />
        <p>受控：value为'2021-10-22'</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            value={this.state.value2}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue2Change}
            timeFormat={'HH:mm'}
            openDateMode
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset2}>重置</Button>
        </div>
        <br />
        <p>受控：value为'2021-10-22 12:05'</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            value={this.state.value3}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue3Change}
            timeFormat={'HH:mm'}
            openDateMode
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset3}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为'2021-9-1 12:05'</p>
        <DateTimePicker
          value={'2021-10-22 12:05'}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
          timeFormat={'HH:mm'}
          openDateMode
        />
        <br />
        <br />
        <h3>其他用法</h3>
        <p> 使用 showDayFooter 关闭底部快捷选择栏</p>
        <DateTimePicker
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
          openDateMode
          showDayFooter={false}
        />
      </div>
    )
  }
}
```

### 融合后台系统默认配置

融合后台系统默认配置

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

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

type DateTimePickerDemoState = {
}

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

  render() {
    return (
      <div className={prefixCls}>
        <DateTimePicker />
      </div>
    )
  }
}
```

### 日期格式转换

三种格式的日期转换

```jsx
import { Component, CSSProperties } from "react";
import { constants, DateTimePicker, Button, DatePickerDateType, DatePicker } from "@weapp/ui";

const { getLocaleDateTime, getWindowDateTimeShowFormat } = DatePicker
const prefixCls = `${constants.uiPcClsPrefix}-demo-datetimepicker`;

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType | null;
  value2: number | DateType | null;
  value3: DateType | null;
  customValue: DateType;
  popupVisible: boolean;
  datetimeformat?: string;
}

const style: CSSProperties = {
  width: '100%',
  height: '100%',
  fontSize: '14px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#666666'
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: '2024-6-3 15:5:5',
      value2: 1717264800000,
      value3: new Date(),
      // value: null,
      customValue: '2024-6-3 15:5:5',
      popupVisible: false
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onValue2Change = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value2: value as string })
  }
  onValue3Change = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value3: value as string })
  }
  onClick = () => { this.setState(({ popupVisible }) => ({ popupVisible: !popupVisible })) }
  customRender = (_this: any, content: any) => {
    return <div
      style={style}
      onClick={this.onClick}>{getLocaleDateTime(this.state.customValue)}</div>
  }
  customRenderChange = (value: DateType | DateType[]) => {
    console.info('customRenderChange', value)
    this.setState({
      customValue: value as string,
      popupVisible: false
    })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  getWindowDateTimeShowFormat = () => { this.setState({ datetimeformat: getWindowDateTimeShowFormat() }) }
  onInputClick = (e: React.MouseEvent) => console.info('click', e)
  onInputFocus = (e: React.ReactText) => console.info('focus', e)
  onInputBlur = (e: React.ReactText) => console.info('blur', e)

  render() {

    return (
      <div className={prefixCls}>
        <p>使用 format 指定抛出数据格式</p>
        <br />
        <br />

        <p>format=='Date'</p>
        <DateTimePicker
          panelType={'trigger'}
          format={`Date`}
          onChange={this.onChange}
          defaultValue={new Date()}
        />
        <br />
        <br />
        <p>format=='YYYY/MM/DD HH:mm:ss'</p>
        <DateTimePicker
          panelType={'trigger'}
          format={'YYYY/MM/DD HH:mm:ss'}
          onChange={this.onChange}
          defaultValue={new Date()}
        />
        <br />
        <br />
        <p>format=='timestamp'</p>
        <DateTimePicker
          panelType={'trigger'}
          format={`timestamp`}
          onChange={this.onChange}
          defaultValue={new Date()}
        />

        <br />
        <br />
        <br />
        <p>受控：value为new Date()</p>
        <p>format=='Date'</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            panelType={'trigger'}
            value={this.state.value3}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue3Change}
            format={`Date`}
          />
        </div>
        <br />
        <br />
        <p>受控：value为2024-6-3 15:5:5</p>
        <p>format=='YYYY/MM/DD HH:mm:ss'</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            panelType={'trigger'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
            format={'YYYY/MM/DD HH:mm:ss'}
          />
        </div>
        <br />
        <br />
        <p>受控：value为1717264800000</p>
        <p>format=='timestamp'</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            panelType={'trigger'}
            value={this.state.value2}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue2Change}
            format={`timestamp`}
          />
        </div>
      </div >

    )
  }
}
```

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

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

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

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

type DateType = DatePickerDateType

type DateTimePickerDemoState = {
  value: DateType[];
}

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

  constructor(props: DateTimePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-6-1 12:12:00', new Date()],
    }
  }

  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>
        <DateTimePicker
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>自定义传入数据</p>
        <DateTimePicker
          isRange
          onChange={this.onChange}
          showRangeAllDayRadio
          rangeAllDayStartTime={'09:00'}
          noonBreakStartTime={'12:00'}
          noonBreakEndTime={'14:00'}
          rangeAllDayEndTime={'17:00'}
        />
        <br />
        <br />
        <p>隐藏不限开始和结束</p>
        <DateTimePicker
          isRange
          onChange={this.onChange}
          showUnlimit={false}
          showRangeAllDayRadio
          rangeAllDayStartTime={'09:00'}
          noonBreakStartTime={'12:00'}
          noonBreakEndTime={'14:00'}
          rangeAllDayEndTime={'17:00'}
        />
        <br />
        <br />
        <p>受控：value为['2021-6-1 12:12:00', new Date()]</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            isRange
            value={this.state.value}
            onChange={this.onValueChange}
            rangeAllDayStartTime={'09:00'}
            noonBreakStartTime={'12:00'}
            noonBreakEndTime={'14:00'}
            rangeAllDayEndTime={'17:00'}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
      </div >
    )
  }
}
```

## API

### DateTimePicker 头部快捷选择按钮用法同 DatePicker

[详情查看 DatePicker 组件文档](/ui/date-picker)

### 注意：

```
1.当存在最大最小日期或者自定义配置日期过滤方法时，不限开始日期与不限结束日期按钮无法点击
2.当点击范围选择快捷选择按钮时，即使设置了最大最小日期或自定义日期过滤方法，也会优先按此按钮的日期处理
3.当同时传入了当前快捷选择的变量selectKey和value时，会优先按value的日期处理，可通过selectedKeyPrior来改变优先级
4.当启用dateMode模式时，当传入值为标准 'YYYY-MM-DD HH:mm:ss' 或 'YYYY-MM-DD HH:mm'(timeFormat设定为'HH:mm'时生效) 格式时，弹出面板会按照已经点击了 '设置时间' 按钮来处理
```

### 类型说明：（请从@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);
}
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| disabled | 选择器是否禁用 | boolean | 否 | false |
| readOnly | 选择器是否完全只读 | boolean | 否 | false |
| triggerProps | trigger 的 props | 参考 trigger 组件的 props | 否 |  |
| bindTriggerContainer | 是否将 trigger 弹出层固定在该节点下 | boolean | 否 | false |
| width | 选择器宽度 | number | 否 |  |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| value | 日期受控值 | DatePickerDateType / DatePickerDateType[] | 否 |  |
| defaultValue | 日期默认值 | DatePickerDateType / DatePickerDateType[] | 否 |  |
| format | 指定抛出数据格式 | 自定义标准日期格式 string / 'timestamp' / 'Date' | 否 | YYYY-MM-DD HH:mm(:ss) |
| showFormat | 显示在输入框中的格式 | 自定义标准日期格式 string(详情请参照下方格式化占位符列表) | 否 | YYYY-MM-DD HH:mm:ss |
| defaultTime | 时间框自动渲染的默认时间 | 'now' / 'null' / 自定义时间标准时间格式 string | 否 | 08:00(:00) |
| defaultEndTime | 时间框结束框自动渲染的默认时间 | 'now' / 'null' / 自定义时间标准时间格式 string | 否 | 18:00(:00) |
| timeFormat | 时间精度 | 'HH:mm:ss' / 'HH:mm' | 否 | 'HH:mm:ss' |
| weekStart | 每周的开始天 | number (0 代表周天 6 代表周六) | 否 | 1 |
| hourStep | 时的步长 | number | 否 | 1 |
| minuteStep | 分的步长 | number | 否 | 1 |
| secondStep | 秒的步长 | number | 否 | 1 |
| minDate | 最小日期 | DatePickerDateType | 否 |  |
| maxDate | 最大日期 | DatePickerDateType | 否 |  |
| customDateFilter | 自定义日期过滤 | (value: DatePickerDateType) => boolean 参数为当前日期，要求返回 boolean | 否 |  |
| filterHolidays | 是否过滤考勤接口节假日 | boolean | 否 |  |
| filterWeekdays | 默认不禁用，传入需要禁用的星期几，0代表周日，1代表周一，依次类推 | number[] | 否 |  |
| minRangeSelectDayNumber | 日期可选最小范围 | number | 否 |  |
| maxRangeSelectDayNumber | 日期可选最大范围 | number | 否 |  |
| isRange | 是否为范围选择 | boolean | 否 | false |
| autoFocus | 是否自动聚焦 | boolean | 否 | false |
| showUnlimit | 是否显示底部不限日期选择栏 | boolean | 否 | true |
| placeholder | 日期时间点占位符 | string | 否 |  |
| startPlaceholder | 日期时间范围开始占位符 | string | 否 |  |
| endPlaceholder | 日期时间范围结束占位符 | string | 否 |  |
| startUnlimitPlaceholder | 不限开始按钮占位符 | string | 否 |  |
| endUnlimitPlaceholder | 不限结束按钮占位符 | string | 否 |  |
| showMultiBtnGroup | 是否显示范围面板头部快捷选择栏 | boolean | 否 |  |
| primaryKey | 原生范围快捷选择按钮配置参数 | DatePickerPrimaryKeyType[] | 否 |  |
| customMultiBtnData | 自定义快捷按钮(isRange && type==='day' 时生效) | DatePickerMultiBtnDataType[] | 否 |  |
| selectedKey | 当前快捷选择的变量 | PrimaryKeyType / string | 否 |  |
| selectedKeyPrior | 改变快捷选择和value的优先级 | boolean | 否 | false |
| openDateMode | 是否开启之选的日期模式 | boolean | 否 |  |
| showDayFooter | dateMode模式下是否显示单选面板底部快捷选择栏 | boolean | 否 | true |
| showNowTimeBtn | 是否显示此刻按钮 | boolean | 否 | true |
| onChange | 选中值改变时的回调 | (value: DatePickerDateType / DatePickerDateType[], key: DatePickerPrimaryKeyType / string, multiBtnData?: DatePickerMultiBtnDataType) => {} | 否 |  |
| onPanelOpen | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onPanelClose | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onClear | 选择器清空的回调 | () => {} | 否 |  |
| onClear | 选择器清空的回调 | () => {} | 否 |  |
| timePickerProps | 时间选择器的props | 参考 timepicker 组件的props | 否 |  |
| rangeReadOnlyEmpty | 范围选择两数据都为空时是否展示空的span | boolean | 否 |  |
| isLocale | 是否开启国际化 | boolean | 否 | true |
| onInputClick | 输入框点击触发回调 | (e: React.MouseEvent, type?: 'start' / 'end') => {} | 否 |  |
| onInputFocus | 输入框聚焦触发回调 | (e: React.ReactText, type?: 'start' / 'end') => {} | 否 |  |
| onInputBlur | 输入框失焦触发回调 | (e: React.ReactText, type?: 'start' / 'end') => {} | 否 |  |
| allowClear | 是否展示清空按钮 | boolean | 否 | true |
| needMaxWidth | 是否限制最大宽度 | boolean | 否 | true |
| maxWidth | 最大宽度 | number | 否 | true |
| onlyPanel | 是否开启单面板模式(demo请搜索date-panel查看) | boolean | 否 | false |
| panelType | 面板模式(时间选择器弹出模式) | 'trigger' \| 'flat' | 否 | 'trigger' |
| rangeDateChangeRemainLastTime | 范围日期变动时是否改变当前选中的时间 | boolean | 否 |  |
| showRangeAllDayRadio | 是否展示快捷选择“上午”、“下午”、“全天” | boolean | 否 |  |
| rangeAllDayStartTime | 全天开始时间 | boolean | 否 |  |
| rangeAllDayEndTime | 全天结束时间 | boolean | 否 |  |
| noonBreakStartTime | 午休开始时间 | boolean | 否 |  |
| noonBreakEndTime | 午休结束时间 | 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 |
