# DatePicker 日期选择器

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

## 代码演示

### 选择日

以「日」为基本单位，基础的日期选择控件

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

const { getWindowDateShowFormat } = DatePicker

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType | null;
  customValue: DateType;
  popupVisible: boolean;
  dateformat?: string
}

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

export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

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

  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) }
  onClick = () => { this.setState(({ popupVisible }) => ({ popupVisible: !popupVisible })) }
  customRender = (_this: any, content: any) => {
    return (
      <div style={style} onClick={this.onClick}>
        customRender: {this.state.customValue}
      </div>
    )
  }
  onCustomVisibleChange = (visible: boolean) => this.setState({ popupVisible: visible })
  customRenderChange = (value: DateType | DateType[]) => {
    console.info('customRenderChange', value)
    this.setState({ customValue: value as string })
  }
  reset = () => { this.setState({ value: '' }) }
  getWindowDateShowFormat = () => { this.setState({ dateformat: getWindowDateShowFormat() }) }
  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>
        <DatePicker
          defaultValue={new Date()}
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
        />
        <br />
        <br />
        <p>禁用</p>
        <DatePicker
          defaultValue={"2021-01-01"}
          disabled />
        <br />
        <br />
        <p>只读</p>
        <DatePicker
          readOnly
          defaultValue={"2021-01-01"}
        />
        <br />
        <p>受控：value为2021-1-1</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            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-01-01</p>
        <DatePicker
          value={new Date('2021-01-01').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DatePicker
          format={`Date`}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY'}</p>
        <DatePicker
          onChange={this.onChange}
          defaultValue={new Date()}
          showFormat={'DD/MM/YYYY'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY'}</p>
        <DatePicker
          onChange={this.onChange}
          defaultValue={new Date()}
          showFormat={'MM.DD.YYYY'}
        />
        <br />
        <br />
        <p>根据组件内部抛出的方法耦合个人设置中配置的 dateformat </p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            onChange={this.onChange}
            defaultValue={new Date()}
            showFormat={this.state.dateformat}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.getWindowDateShowFormat}>获取window中的dateformat</Button>
        </div>
        <br />
        <p>使用 weekStart 更改每周的开始天</p>
        <DatePicker
          weekStart={3}
        />
        <br />
        <br />
        <p>使用 showDayFooter 隐藏底部快捷选择按钮栏</p>
        <DatePicker
          showDayFooter={false}
        />
        <br />
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <DatePicker
          bindTriggerContainer
        />
        <br />
        <br />
        <p>自定义className、style与triggerProps</p>
        <DatePicker
          placeholder={'自定义placeholder'}
          className={'date-picker-demo'}
          popupVisible={this.state.popupVisible}
          onVisibleChange={this.onCustomVisibleChange}
          style={{
            border: '1px solid red',
            height: '30px'
          }}
          customRender={this.customRender}
          onChange={this.customRenderChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DatePicker
          allowClear={false}
          defaultValue={'2020-12-25'}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <DatePicker
          defaultValue={'2020-12-25'}
          width={100}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <DatePicker
          defaultValue={'2020-12-25'}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <DatePicker
          defaultValue={'2020-12-25'}
          maxWidth={400}
        />
        <br />
        <br />
      </div >
    )
  }
}
```

### 选择月

以「月」为基本单位，基础的日期选择控件

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType;
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '2021-01',
    }
  }

  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: '' }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          type={'month'}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2021-01</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'month'}
            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-01</p>
        <DatePicker
          type={'month'}
          value={new Date('2021-01').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

### 选择年与半年

以「年、半年」为基本单位，基础的日期选择控件

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType;
  value1?: DateType
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '2021',
      value1: '2021-H1'
    }
  }

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

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          type={'year'}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2021</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'year'}
            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</p>
        <DatePicker
          type={'year'}
          value={new Date('2021').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <p>选择半年</p>
        <DatePicker
          type={'halfyear'}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2021-H1</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'halfyear'}
            value={this.state.value1}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue1Change}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset1}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp的今天</p>
        <DatePicker
          type={'halfyear'}
          value={new Date().getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择季度

以「季度」为基本单位，基础的日期选择控件

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType;
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '2021-Q1',
    }
  }

  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: '' }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          type={'season'}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2021-Q1</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'season'}
            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的今天</p>
        <DatePicker
          type={'season'}
          value={new Date().getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择多个天数

通过扩展基础的日期选择，可以选择多个天数

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType[];
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-1-1', '2021-1-2'],
    }
  }

  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: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>多选日</p>
        <DatePicker
          type={'days'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>禁用</p>
        <DatePicker
          type={'days'}
          disabled
          defaultValue={['2021-01-01', '2021-01-02', '2021-01-03']}
        />
        <br />
        <br />
        <p>只读</p>
        <DatePicker
          type={'days'}
          readOnly
          defaultValue={['2021-01-01', '2021-01-02', '2021-01-03']}
        />
        <br />
        <br />
        <p>受控：value为['2021-1-1', '2021-1-2']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'days'}
            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-01-01', '2021-01-02']</p>
        <DatePicker
          type={'days'}
          value={[new Date('2021-01-01').getTime(), new Date('2021-01-02').getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <DatePicker
          width={150}
          type={'days'}
          defaultValue={['2021-01-01', '2021-01-02', '2021-01-03']}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DatePicker
          type={'days'}
          defaultValue={['2021-01-01', '2021-01-02', '2021-01-03']}
          allowClear={false}
        />
      </div>
    )
  }
}
```

### 选择多个月份

通过扩展基础的日期选择，可以选择多个月份

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType[];
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-1', '2021-2'],
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValue1Change = (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: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>多选月</p>
        <DatePicker
          type={'months'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>多选月受控：value为['2021-1', '2021-2']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'months'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue1Change}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>月受控不更新值：value为timestamp类型的['2021-01', '2021-02']</p>
        <DatePicker
          type={'months'}
          value={[new Date('2021-01').getTime(), new Date('2021-02').getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择多个年份与多个半年

通过扩展基础的日期选择，可以选择多个年份

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType[];
  value1?: DateType[];
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021', '2022'],
      value1: ['2021-H1', '2021-H2']
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value);
    this.setState({ value: value as DateType[] })
  }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValueChange', value);
    this.setState({ value1: value as DateType[] })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: [] }) }
  reset1 = () => { this.setState({ value1: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>多选年</p>
        <DatePicker
          type={'years'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>多选年受控：value为['2021', '2022']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'years'}
            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', '2022']</p>
        <DatePicker
          type={'years'}
          value={[new Date('2021').getTime(), new Date('2022').getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>多选半年</p>
        <DatePicker
          type={'halfyears'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>多选半年受控：value为['2021-H1', '2021-H2']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'halfyears'}
            value={this.state.value1}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue1Change}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset1}>重置</Button>
        </div>
        <br />
        <p>年受控不更新值：value为['2021-H1', '2022-H2']</p>
        <DatePicker
          type={'halfyears'}
          value={['2021-H1', '2022-H2']}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

### 选择多个季度

通过扩展基础的日期选择，可以选择多个季度

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

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType[];
}

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

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-Q1', '2021-Q2'],
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValue1Change = (value: DateType | DateType[]) => {
    console.info('onValue1Change', 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: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>多选季度</p>
        <DatePicker
          type={'seasons'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>多选季度受控：value为['2021-Q1', '2021-Q2']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'seasons'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValue1Change}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>季度受控不更新值：value为timestamp类型的['2021-Q1', '2021-Q2']</p>
        <DatePicker
          type={'seasons'}
          // value={[new Date('2021-01').getTime(), new Date('2021-02').getTime()]}
          value={['2021-Q1', '2021-Q2']}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择日期范围

可在一个选择器中便捷地选择一个日范围

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

const { getWindowDateShowFormat } = DatePicker

type DateType = DatePickerDateType
type RangeDemoProps = {}
type RangeDemoState = {
  value?: DateType[];
  dateformat?: string;
}

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

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

  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') }
  getWindowDateShowFormat = () => { this.setState({ dateformat: getWindowDateShowFormat() }) }
  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>
        <DatePicker
          type={'day'}
          isRange
        />
        <br />
        <br />
        <p>禁用</p>
        <DatePicker
          type={'day'}
          isRange
          disabled
          defaultValue={['2021-01-01', new Date()]}
        />
        <br />
        <br />
        <p>只读</p>
        <DatePicker
          type={'day'}
          isRange
          readOnly
          defaultValue={[new Date(), '']}
        />
        <br />
        <p>受控：value为['2021-6-1', new Date()]</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'day'}
            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 />
        <p>受控不更新值：value为timestamp类型的['2021-06-01', new Date()]</p>
        <DatePicker
          type={'day'}
          isRange
          value={[new Date('2021-06-01').getTime(), new Date().getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>不限开始与不限结束:defaultValue为['','']，若传入 [] 则默认不显示</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={['', '']}
        />
        <br />
        <br />
        <p>只限开始</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={[new Date(), '']}
        />
        <br />
        <br />
        <p>只限结束</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={['', new Date()]}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DatePicker
          type={'day'}
          isRange
          format={'Date'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY'}</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={[new Date(), new Date()]}
          showFormat={'DD/MM/YYYY'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY'}</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={[new Date(), new Date()]}
          showFormat={'MM.DD.YYYY'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>根据组件内部抛出的方法耦合个人设置中配置的 dateformat </p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'day'}
            isRange
            defaultValue={[new Date(), new Date()]}
            showFormat={this.state.dateformat}
            onChange={this.onChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.getWindowDateShowFormat}>获取window中的dateformat</Button>
        </div>
        <br />
        <br />
        <p>使用 showUnlimit 隐藏底部不限日期选择栏</p>
        <DatePicker
          type={'day'}
          showUnlimit={false}
          isRange
        />
        <br />
        <br />
        <p>自定义className、style与triggerProps</p>
        <div style={{ float: 'right' }}>
          <DatePicker
            type={'day'}
            isRange
            startPlaceholder={`占位符1`}
            endPlaceholder={`占位符2`}
            className={'date-picker-demo'}
            style={{ border: '1px solid red' }}
            triggerProps={{ popupPlacement: 'left' }}
          />
        </div>
        <br />
        <br />
        <p>不显示清空按钮</p>
        <DatePicker
          type={'day'}
          isRange
          allowClear={false}
          defaultValue={['2021-01-01', new Date()]}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <DatePicker
          type={'day'}
          isRange
          width={150}
          defaultValue={['2021-01-01', new Date()]}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <DatePicker
          type={'day'}
          isRange
          needMaxWidth={false}
          defaultValue={['2021-01-01', new Date()]}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <DatePicker
          type={'day'}
          isRange
          maxWidth={400}
          defaultValue={['2021-01-01', new Date()]}
        />
      </div>
    )
  }
}
```

### 选择月份范围

可在一个选择器中便捷地选择一个月范围

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

type DateType = DatePickerDateType

type RangeDemoProps = {}
type RangeDemoState = {
  value?: DateType[];
}

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021-1', '2021-2'],
    }
  }

  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: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          type={'month'}
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为['2021-1', '2021-2']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'month'}
            isRange
            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-1', '2021-2']</p>
        <DatePicker
          type={'month'}
          isRange
          value={[new Date('2021-01').getTime(), new Date('2021-02').getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择年份范围

可在一个选择器中便捷地选择一个年范围

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

type DateType = DatePickerDateType

type RangeDemoProps = {}
type RangeDemoState = {
  value?: DateType[];
}

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: ['2021', '2022']
    }
  }

  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: [] }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          type={'year'}
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为['2021', '2022']</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            type={'year'}
            isRange
            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', '2022']</p>
        <DatePicker
          type={'year'}
          isRange
          value={[new Date('2021').getTime(), new Date('2022').getTime()]}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 改变每周起始天

当自定义每周的起始天数时，点击本周或传入的key为thisWeek时，值会有变化

```jsx
import { Component } from "react";
import { constants, DatePicker, Input } from "@weapp/ui";
import { dayjs } from "@weapp/utils";
const { getWeekOfYear } = DatePicker

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

export default class DatePickerDemo extends Component {

  state = {
    date: new Date(),
    input: '0'
  }

  onDatePickerChange = (date: any) => this.setState({ date })

  onInputChange = (input: any) => this.setState({ input })

  render() {
    const { date, input } = this.state
    return (
      <div className={prefixCls}>
        <p>改变每周的起始天</p>
        <DatePicker
          placeholder={'周起始天为周日'}
          weekStart={0} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周一'}
          weekStart={1} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周二'}
          weekStart={2} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周三'}
          weekStart={3} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周四'}
          weekStart={4} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周五'}
          weekStart={5} />
        <br />
        <br />
        <DatePicker
          placeholder={'周起始天为周六'}
          weekStart={6} />

        <p>试试看点击面板头部快捷选择按钮的 '本周'</p>
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周日'}
          type={'day'}
          isRange
          weekStart={0} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周一'}
          type={'day'}
          isRange
          weekStart={1} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周二'}
          type={'day'}
          isRange
          weekStart={2} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周三'}
          type={'day'}
          isRange
          weekStart={3} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周四'}
          type={'day'}
          isRange
          weekStart={4} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周五'}
          type={'day'}
          isRange
          weekStart={5} />
        <br />
        <br />
        <DatePicker
          startPlaceholder={'周起始天为'}
          endPlaceholder={'周六'}
          type={'day'}
          isRange
          weekStart={6} />
        <p>根据日期和传入的初始周计算当前周为全年的第几周</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div>
            选择日期：
            <DatePicker
              value={date}
              onChange={this.onDatePickerChange}
            />
          </div>
          <div>
            输入周起始天：
            <Input
              value={input}
              style={{ width: 200 }}
              onChange={this.onInputChange} />
          </div>
          <div>{`${dayjs(date).format('YYYY-MM-DD')}属于年度的第${getWeekOfYear(date, Number(input))}周`}</div>
        </div>
      </div>
    )
  }
}
```

### 设置边界时间

自定义控制最大最小值

```jsx
import { Component } from "react";
import { dayjs } from '@weapp/utils'
import { constants, DatePicker, DatePickerDateType, DatePickerMultiBtnDataType, DatePickerPrimaryKeyType, Select, Switch, Input } from "@weapp/ui";

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: '星期六' },
]

type DateType = DatePickerDateType

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

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      minDate: '',
      maxDate: '',
      // minDate: '2025-10-01',
      // maxDate: '2025-10-31',
      selectValue: [],
      filterHolidays: false,
      minRangeSelectDayNumber: void 0,
      // minRangeSelectDayNumber: 94,
      maxRangeSelectDayNumber: void 0,
    }
  }

  onChange = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    key ? console.info('onChange', value, key, multiBtnData) : 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 })

  render() {
    const { minDate, maxDate, selectValue, filterHolidays, minRangeSelectDayNumber, maxRangeSelectDayNumber } = this.state
    return (
      <div className={prefixCls}>
        <h3>自定义控制（最大最小日期/过滤星期/过滤节假日）</h3>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最小日期：</span>
            <DatePicker
              value={minDate}
              onChange={this.onMinValueChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最大日期：</span>
            <DatePicker
              value={maxDate}
              onChange={this.onMaxValueChange}
            />
          </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>
            <DatePicker
              onChange={this.onChange}
              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>
            <DatePicker
              onChange={this.onChange}
              minDate={minDate}
              maxDate={maxDate}
              // type={'year'}
              // type={'month'}
              isRange
              filterWeekdays={selectValue?.map(Number)}
              filterHolidays={filterHolidays}
              minRangeSelectDayNumber={minRangeSelectDayNumber}
              maxRangeSelectDayNumber={maxRangeSelectDayNumber}
            />
          </div>
        </div>
        <br />
        <h3>单个日期</h3>
        <p>minDate为2021-01-01，maxDate为new Date()</p>
        <DatePicker
          minDate={'2021-01-01'}
          maxDate={new Date()}
        />
        <p>minDate为dayjs()，maxDate为dayjs().add(1, 'year')</p>
        <DatePicker
          minDate={dayjs()}
          maxDate={dayjs().add(1, 'year')}
        />
        <br />
        <br />
        <p>minDate为2021-01，maxDate为new Date()</p>
        <DatePicker
          type={'month'}
          minDate={"2021-01"}
          maxDate={new Date()}
        />
        <p>minDate为dayjs()，maxDate为dayjs().add(1, 'year')</p>
        <DatePicker
          type={'month'}
          minDate={dayjs()}
          maxDate={dayjs().add(1, 'year')}
        />
        <br />
        <p>minDate为2020-Q1,maxDate为2022-Q4</p>
        <DatePicker
          type={'season'}
          minDate={'2020-Q1'}
          maxDate={'2022-Q4'}
        />
        <br />
        <p>minDate为2020-H1,maxDate2022-H2</p>
        <DatePicker
          type={'halfyear'}
          minDate={'2020-H1'}
          maxDate={'2022-H2'}
        />
        <br />
        <p>minDate为2021，maxDate为2025</p>
        <DatePicker
          type={'year'}
          minDate={"2021"}
          maxDate={"2025"}
        />

        <p>minDate为dayjs()，maxDate为dayjs().add(1, 'year')</p>
        <DatePicker
          type={'year'}
          minDate={dayjs()}
          maxDate={dayjs().add(1, 'year')}
        />
        <br />
        <br />
        <p>传入日期不在范围内时，按原数据显示：defaultValue为'2020-12-25'</p>
        <DatePicker
          defaultValue={'2020-12-25'}
          minDate={'2021-01-01'}
          maxDate={new Date()}
        />
        <br />
        <br />
        <h3>日期范围</h3>
        <h3>注意：即使设置了边界时间，在范围选择面板头部的快捷选择按钮的优先级仍然最高，若想自定义控制最大最小时间的同时想使用头部快捷选择按钮，请使用 customMultiBtnData 来自定义渲染头部快捷按钮</h3>
        <p>minDate为2021-06-01，maxDate为new Date()</p>
        <DatePicker
          type={'day'}
          isRange
          minDate={'2021-06-01'}
          maxDate={new Date()}
        />
        <br />
        <br />
        <p>minDate为2021-01，maxDate为new Date()</p>
        <DatePicker
          type={'month'}
          isRange
          minDate={"2021-01"}
          maxDate={new Date()}
        />
        <br />
        <br />
        <p>minDate为2021，maxDate为2022</p>
        <DatePicker
          type={'year'}
          isRange
          minDate={"2021"}
          maxDate={"2022"}
        />
        <br />
        <br />
        <p>传入日期不在范围内时，按原数据显示：defaultValue为['2021-05-01', '2021-05-31']</p>
        <DatePicker
          type={'day'}
          isRange
          defaultValue={['2021-05-01', '2021-05-31']}
          minDate={'2021-06-01'}
          maxDate={new Date()}
        />
        <br />
        <br />
      </div >
    )
  }
}
```

### 快捷范围选择

可自定义范围选择头部快捷按钮

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

type DateType = DatePickerDateType

type RangeDemoProps = {}
type RangeDemoState = {
}
const formatDate = (date: any) => dayjs(date).format('YYYY-MM-DD HH:mm:ss');
// 获取最近n小时的时间区间
export const getHoursDistance = (n: number, unlimit?: 'start' | 'end' | 'all') => {
  const now = Date.now();
  const formatNow = formatDate(now);
  const preNow = now - (n * 60 * 60 * 1000);
  const formatPreN = formatDate(preNow);
  const dateStart = unlimit === 'all' || unlimit === 'start' ? '' : formatPreN;
  const dateEnd = unlimit === 'all' || unlimit === 'end' ? '' : formatNow;
  const dateValue = [dateStart, dateEnd];
  return dateValue;
}
//获取最近n分钟内的时间
export const getMinuteDistance = (n: number, unlimit?: 'start' | 'end' | 'all') => {
  const now = Date.now();
  const formatNow = formatDate(now);
  const preNow = now - (n * 60 * 1000);
  const formatPreN = formatDate(preNow);
  const dateStart = unlimit === 'all' || unlimit === 'start' ? '' : formatPreN;
  const dateEnd = unlimit === 'all' || unlimit === 'end' ? '' : formatNow;
  const dateValue = [dateStart, dateEnd];
  return dateValue;
}

const ary: DatePickerMultiBtnDataType[] = [
  {
    type: 'mytype',
    title: '自定义1',
    startDate: '',
    endDate: ''
  },
  {
    type: 'mytype2',
    title: '自定义2',
    startDate: '2021-6-11',
    endDate: '2021-6-21'
  },
  {
    type: 'mytype3',
    title: '自定义3',
    startDate: dayjs('2021-6-11'),
    endDate: dayjs('2021-6-21')
  },
  {
    type: 'mytype4',
    title: '自定义4',
    startDate: new Date('2021-6-11').toDateString(),
    endDate: new Date('2021-6-21').toDateString(),
  },
  {
    type: 'mytype5',
    title: '自定义5',
    startDate: +new Date('2021-6-11'),
    endDate: +new Date('2021-6-21')
  },
  {
    type: 'mytype6',
    title: '自定义6',
    startDate: () => { return dayjs() },
    endDate: () => { return dayjs().add(1, 'day') }
  },
  {
    type: 'mytype7',
    title: '自定义7',
    startDate: () => { return dayjs() },
    endDate: () => { return dayjs().subtract(1, 'day') }
  },
  {
    type: 'mytype8',
    title: '自定义8',
    startDate: dayjs(),
    endDate: ''
  },
  {
    type: 'mytype9',
    title: '自定义9',
    startDate: '',
    endDate: dayjs()
  },
]

const ary2: DatePickerMultiBtnDataType[] = [
  {
    type: 'last24hour',
    title: '最近24小时',
    startDate: () => getHoursDistance(24, 'end')[0],
    endDate: () => new Date(),
  },
  {
    type: 'last30min',
    title: '最近30分钟',
    startDate: () => getMinuteDistance(30)[0],
    endDate: () => getMinuteDistance(30)[1],
  },
  {
    type: 'last15min',
    title: '最近15分钟',
    startDate: () => getMinuteDistance(15)[0],
    endDate: () => getMinuteDistance(15)[1],
  },
  {
    type: 'last5min',
    title: '最近5分钟',
    startDate: () => getMinuteDistance(5)[0],
    endDate: () => getMinuteDistance(5)[1],
  },
  {
    type: 'last1min',
    title: '最近1分钟',
    startDate: () => getMinuteDistance(1)[0],
    endDate: () => getMinuteDistance(1)[1],
  }
]

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
    }
  }

  onChange = (value: DateType | DateType[], key?: DatePickerPrimaryKeyType | string, multiBtnData?: DatePickerMultiBtnDataType) => {
    key ? console.info('onChange', value, key, multiBtnData) : console.info('onChange', value)
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }

  render() {
    return (
      <div className={prefixCls}>
        <p>当点击快捷选择按钮时，onChange的第二个参数会抛出自定义的变量名，第三个参数会抛出自定义快捷范围对象</p>
        <DatePicker
          type={'day'}
          isRange
          format={'YYYY-MM-DD HH:mm:ss'}
          onChange={this.onChange}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
        />
        <br />
        <br />
        <p>使用 showMultiBtnGroup 隐藏头部快捷选择栏</p>
        <DatePicker
          type={'day'}
          isRange
          showMultiBtnGroup={false}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 primaryKey 配置原生头部按钮</p>
        <DatePicker
          primaryKey={['lastYear', 'thisYear', 'nextYear']}
          type={'day'}
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 customMultiBtnData 自定义配置快捷选择按钮</p>
        <DatePicker
          primaryKey={['yesterday', 'today', 'tomorrow']}
          customMultiBtnData={ary}
          type={'day'}
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>当头部按钮过多时，呈现滚动效果</p>
        <DatePicker
          customMultiBtnData={ary}
          type={'day'}
          isRange
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>配置含有从属关系的范围</p>
        <DateTimePicker
          customMultiBtnData={ary2}
          primaryKey={[]}
          isRange
          onChange={this.onChange}
        />
      </div >
    )
  }
}
```

### selectedKey 与 value 受控

可自定义配置受控变量

```jsx
import { Component } from "react";
import { dayjs } from '@weapp/utils'
import { constants, DatePicker, Button, DatePickerDateType, DatePickerMultiBtnDataType, DatePickerPrimaryKeyType, utils } from "@weapp/ui";
const { isNil } = utils

type DateType = DatePickerDateType

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

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

export default class DatePickerDemo extends Component<RangeDemoProps, RangeDemoState> {

  constructor(props: DatePickerDemo) {
    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) => {
    if (!isNil(key)) {
      console.info('onValue2Change', value, key, multiBtnData)
      this.setState({ selectedKey2: key })
    } else {
      console.info('onValue2Change', value)
    }
    this.setState({ value2: value as DateType[], })
  }
  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>
        <div style={{ display: 'flex' }}>
          <DatePicker
            value={this.state.value1}
            type={'day'}
            isRange
            onChange={this.onValue1Change}
          />
          &nbsp;<Button type={'primary'} size={'small'} onClick={this.changeValue1}>改变value至最近三天</Button>
        </div>
        <br />
        <p>2.使用 selectedKey 来自定义控制数据</p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            selectedKey={this.state.selectedKey1}
            type={'day'}
            isRange
            onChange={this.onSelectedKey1Change}
          />
          &nbsp;<Button type={'success'} size={'small'} onClick={this.changeSelectedKey1ToLastMonth}>lastMonth</Button>
          &nbsp;<Button type={'success'} size={'small'} onClick={this.changeSelectedKey1ToNextMonth}>nextMonth</Button>
        </div>
        <br />
        <p>3.当同时存在 selectedKey 和 value 时，优先按 value 的日期处理，可使用 selectedKeyPrior 来改变优先级</p>
        <p><Button type={this.state.selectedKeyPrior ? 'success' : 'primary'} size={'small'} onClick={this.changePrimary}>改变selectedKeyPrior 当前优先级: {this.state.selectedKeyPrior ? 'selectedKey' : 'value'}</Button></p>
        <div style={{ display: 'flex' }}>
          <DatePicker
            selectedKey={this.state.selectedKey2}
            selectedKeyPrior={this.state.selectedKeyPrior}
            value={this.state.value2}
            type={'day'}
            isRange
            onChange={this.onValue2Change}
          />
          &nbsp;<Button type={'primary'} size={'small'} onClick={this.changeValue2}>改变value：最近三天</Button>
          &nbsp;<Button type={'success'} size={'small'} onClick={this.changeSelectedKey2ToLastMonth}>改变selectedKey：lastMonth</Button>
          &nbsp;<Button type={'success'} size={'small'} onClick={this.changeSelectedKey2ToNextMonth}>改变selectedKey：nextMonth</Button>
        </div>
        <br />
        <p>4.使用 selectedKey 做初始化，后续采用value做受控</p>
        <DatePicker
          selectedKey={'thisMonth'}
          value={this.state.value3}
          type={'day'}
          isRange
          onChange={this.onValue3Change}
        />
      </div >
    )
  }
}
```

### 长字符串中日期转换

方法具体说明见api方法内部说明

```jsx
import { Component, ReactText } from "react";
import { constants, Input, Button } from "@weapp/ui";
import { getDateArrayFromString, getLocaleDateString } from "@weapp/utils"

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

type DayDemoProps = {}
type DayDemoState = {
  value: string
  showValue: string
  showValue2: string
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '',
      showValue: '',
      showValue2: ''
    }
  }

  onChange = (value: ReactText) => this.setState({ value: value.toString() })

  onBtnClick = () => {
    const { value } = this.state
    console.info('getDateArrayFromString', getDateArrayFromString(value))
    this.setState({
      showValue: getLocaleDateString(value),
      //@ts-ignore
      showValue2: getLocaleDateString(value, true),
    })
  }

  render() {
    const { value, showValue, showValue2 } = this.state
    return (
      <div className={prefixCls} >
        <p>getDateArrayFromString方法在线检测</p>
        <div style={{ display: 'flex' }}>
          <Input
            value={value}
            style={{ width: 300 }}
            placeholder={'请输入想检测的字符串'}
            onChange={this.onChange}
          />
          <Button
            onClick={this.onBtnClick}
            type={'primary'}
            style={{ width: 150 }}
          >点击进行转换</Button>
        </div>
        <div style={{ display: 'flex' }}>
          <p>转换后的展示情况：</p>
          <p>{showValue}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>转换后的展示情况（保留时分秒格式）：</p>
          <p>{showValue2}</p>
        </div>
      </div >
    )
  }
}
```

### 国际化与格式化转化

组件内部抛出 getLocateDateTime 与 getServerDateTime 方法检验

```jsx
import { Component, ReactText } from "react";
import { constants, DateTimePicker, Button, Input } from "@weapp/ui";
import { dayjs, getLocaleDateTime, getServerDateTime, getLocaleDate, getServerDate } from "@weapp/utils";

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

type DayDemoProps = {}
type DayDemoState = {
  value: string,
  localeDateTime: string,
  serverDateTime: string,
  localeDate: string,
  serverDate: string,
  date: any,
  UTCDate1: string,
  UTCDate2: string,
  UTCDate3: string,
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '',
      localeDateTime: '',
      serverDateTime: '',
      localeDate: '',
      serverDate: '',
      date: new Date(),
      UTCDate1: '',
      UTCDate2: '',
      UTCDate3: '',
    }
  }

  onChange = (value: ReactText) => this.setState({ value: value.toString() })

  getLocaleDate = () => {
    const { value } = this.state
    this.setState({
      localeDateTime: getLocaleDateTime(value) as string,
      serverDateTime: getServerDateTime(value) as string,
      localeDate: getLocaleDate(value) as string,
      serverDate: getServerDate(value) as string
    })
  }
  getUTCDate = () => {
    const { date } = this.state
    this.setState({
      UTCDate1: dayjs(date).format(),
      UTCDate2: new Date(date).toISOString(),
      UTCDate3: new Date(date).toString()
    })
  }
  onDateTimePickerChange = (date: any) => {
    console.info('onDateTimePickerChange', date)
    this.setState({ date })
  }

  render() {
    const { localeDateTime, serverDateTime, localeDate, serverDate, date, UTCDate1, UTCDate2, UTCDate3 } = this.state
    return (
      <div className={prefixCls} >
        <p>选择日期时间</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            onChange={this.onDateTimePickerChange}
            value={date}
            isLocale={false}
          />
          <Button
            onClick={this.getUTCDate}
            type={'primary'}
            style={{ width: 200 }}
          >点击获取含有时区信息的string</Button>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型1：</p>
          <p>{UTCDate1}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型2：</p>
          <p>{UTCDate2}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型3：</p>
          <p>{UTCDate3}</p>
        </div>
        <p> getLocateDateTime 与 getServerDateTime 方法检验</p>
        <div style={{ display: 'flex' }}>
          <Input
            onChange={this.onChange}
            value={this.state.value}
            style={{ width: 200 }}
          />
          <Button
            onClick={this.getLocaleDate}
            type={'primary'}
            style={{ width: 200 }}
          >检测测试日期</Button>
        </div>
        <br />
        <div style={{ display: 'flex' }}>
          <p>getLocateDateTime（服务端转客户端）：</p>
          <p>{localeDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDateTime（客户端转服务端）：</p>
          <p>{serverDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getLocateDate（服务端转客户端）：</p>
          <p>{localeDate}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDate（客户端转服务端）：</p>
          <p>{serverDate}</p>
        </div>
      </div >
    )
  }
}
```

### 获取自定义格式及拼接

组件内部抛出 getCustomDateByWindow 方法检验

```jsx
import { Component, ReactText } from "react";
import { constants, DatePicker, Button, Select, Input, DateTimePicker, SelectValueType } from "@weapp/ui";
//@ts-ignore
import { dayjs, getWindowDateTimeShowFormat, getCustomFormatByWindow, getCustomFormatDateByWindow } from "@weapp/utils";

const options = [
  { id: 'Y', content: '年' },
  { id: 'M', content: '月' },
  { id: 'D', content: '日' },
  { id: 'H', content: '时' },
  { id: 'm', content: '分' },
  { id: 's', content: '秒' }
];

const prefixCls = `${constants.uiPcClsPrefix}-demo-datepicker`;
type DayDemoProps = {}
type DayDemoState = {
  value: string,
  selectValue: any[],
  inputValue: string,
  windowFormat: string,
  windowDate: string,
  customFormat: string,
  customDate: string
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      selectValue: ['M', 'D', 'H', 'm'],
      inputValue: 'YYYY/MM/DD HH:mm:ss',
      windowFormat: '',
      windowDate: '',
      customFormat: '',
      customDate: ''
    }
  }

  onDatePickerChange = (value: any) => this.setState({ value })

  onChange = (value: ReactText) => this.setState({ inputValue: value.toString() })

  handleArrChange = (v: SelectValueType) => this.setState({ selectValue: v as string[] })

  changeWindowFormat = () => {
    const { value, selectValue } = this.state
    if (getWindowDateTimeShowFormat()) {
      this.setState({ windowFormat: getCustomFormatByWindow(selectValue).filterFormat })
      this.setState({ windowDate: getCustomFormatDateByWindow(value, selectValue) })
    }
  }

  changeCustomFormat = () => {
    const { value, selectValue, inputValue } = this.state
    if (inputValue) {
      this.setState({ customFormat: getCustomFormatByWindow(selectValue, inputValue).filterFormat })
      this.setState({ customDate: getCustomFormatDateByWindow(value, selectValue, inputValue) })
    }
  }

  render() {
    const format = getWindowDateTimeShowFormat() || '获取失败'
    const { windowFormat, windowDate, customFormat, customDate, value, selectValue, inputValue } = this.state
    return (
      <div className={prefixCls} >
        <Select
         
          style={{ width: 200 }}
          multiple
          data={options}
          value={selectValue}
          onChange={this.handleArrChange}
          placeholder={'请选择所需要展示的时分秒'}
        />
        <br />
        <DateTimePicker
          value={value}
          timeFormat={'HH:mm:ss'}
          onChange={this.onDatePickerChange} />
        <br />
        <Button
          onClick={this.changeWindowFormat}
          type={'primary'}
          style={{ width: 200 }}
        >按系统格式切割</Button>
        <p>系统日期时间格式为：{format}</p>
        <p>系统切割格式：{windowFormat}</p>
        <p>系统切割格式的日期时间：{windowDate}</p>
        <Button
          onClick={this.changeCustomFormat}
          type={'primary'}
          style={{ width: 200 }}
        >按自定义格式切割</Button>
        <p>
          自定义格式：
          <Input
            value={inputValue}
            onChange={this.onChange}
            style={{ width: 200 }}
            placeholder={'请输入自定义格式'}
          />
        </p>
        <p>自定义切割格式：{customFormat}</p>
        <p>自定义切割格式的日期时间：{customDate}</p>
      </div >
    )
  }
}
```

### 长字符串中日期转换日期Date形式format={'Date'}

国际化与格式化转化

```jsx
import { Component, ReactText } from "react";
import { constants, DateTimePicker, Button, Input } from "@weapp/ui";
import { dayjs, getLocaleDateTime, getServerDateTime, getLocaleDate, getServerDate } from "@weapp/utils";

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

type DayDemoProps = {}
type DayDemoState = {
  value: string,
  localeDateTime: string,
  serverDateTime: string,
  localeDate: string,
  serverDate: string,
  date: any,
  UTCDate1: string,
  UTCDate2: string,
  UTCDate3: string,
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '',
      localeDateTime: '',
      serverDateTime: '',
      localeDate: '',
      serverDate: '',
      date: new Date(),
      UTCDate1: '',
      UTCDate2: '',
      UTCDate3: '',
    }
  }

  onChange = (value: ReactText) => this.setState({ value: value.toString() })

  getLocaleDate = () => {
    const { value } = this.state
    this.setState({
      localeDateTime: getLocaleDateTime(value) as string,
      serverDateTime: getServerDateTime(value) as string,
      localeDate: getLocaleDate(value) as string,
      serverDate: getServerDate(value) as string
    })
  }
  getUTCDate = () => {
    const { date } = this.state
    this.setState({
      UTCDate1: dayjs(date).format(),
      UTCDate2: new Date(date).toISOString(),
      UTCDate3: new Date(date).toString()
    })
  }
  onDateTimePickerChange = (date: any) => {
    console.info('onDateTimePickerChange', date)
    this.setState({ date })
  }

  render() {
    const { localeDateTime, serverDateTime, localeDate, serverDate, date, UTCDate1, UTCDate2, UTCDate3 } = this.state
    return (
      <div className={prefixCls} >
        <p>选择日期时间</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            onChange={this.onDateTimePickerChange}
            value={date}
            isLocale={false}
            format={'Date'}
          />
          <Button
            onClick={this.getUTCDate}
            type={'primary'}
            style={{ width: 200 }}
          >点击获取含有时区信息的string</Button>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型1：</p>
          <p>{UTCDate1}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型2：</p>
          <p>{UTCDate2}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型3：</p>
          <p>{UTCDate3}</p>
        </div>
        <p> getLocateDateTime 与 getServerDateTime 方法检验</p>
        <div style={{ display: 'flex' }}>
          <Input
            onChange={this.onChange}
            value={this.state.value}
            style={{ width: 200 }}
          />
          <Button
            onClick={this.getLocaleDate}
            type={'primary'}
            style={{ width: 200 }}
          >检测测试日期</Button>
        </div>
        <br />
        <div style={{ display: 'flex' }}>
          <p>getLocateDateTime（服务端转客户端）：</p>
          <p>{localeDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDateTime（客户端转服务端）：</p>
          <p>{serverDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getLocateDate（服务端转客户端）：</p>
          <p>{localeDate}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDate（客户端转服务端）：</p>
          <p>{serverDate}</p>
        </div>
      </div >
      
    )
  }
}
```

### 长字符串中日期转换时间戳形式format={'timestamp'}

国际化与格式化转化

```jsx
import { Component, ReactText } from "react";
import { constants, DateTimePicker, Button, Input } from "@weapp/ui";
import { dayjs, getLocaleDateTime, getServerDateTime, getLocaleDate, getServerDate } from "@weapp/utils";

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

type DayDemoProps = {}
type DayDemoState = {
  value: string,
  localeDateTime: string,
  serverDateTime: string,
  localeDate: string,
  serverDate: string,
  date: any,
  UTCDate1: string,
  UTCDate2: string,
  UTCDate3: string,
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '',
      localeDateTime: '',
      serverDateTime: '',
      localeDate: '',
      serverDate: '',
      date: new Date(),
      UTCDate1: '',
      UTCDate2: '',
      UTCDate3: '',
    }
  }

  onChange = (value: ReactText) => this.setState({ value: value.toString() })

  getLocaleDate = () => {
    const { value } = this.state
    this.setState({
      localeDateTime: getLocaleDateTime(value) as string,
      serverDateTime: getServerDateTime(value) as string,
      localeDate: getLocaleDate(value) as string,
      serverDate: getServerDate(value) as string
    })
  }
  getUTCDate = () => {
    const { date } = this.state
    this.setState({
      UTCDate1: dayjs(date).format(),
      UTCDate2: new Date(date).toISOString(),
      UTCDate3: new Date(date).toString()
    })
  }
  onDateTimePickerChange = (date: any) => {
    console.info('onDateTimePickerChange', date)
    this.setState({ date })
  }

  render() {
    const { localeDateTime, serverDateTime, localeDate, serverDate, date, UTCDate1, UTCDate2, UTCDate3 } = this.state
    return (
      <div className={prefixCls} >
        <p>选择日期时间</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            onChange={this.onDateTimePickerChange}
            value={date}
            isLocale={false}
            format={'timestamp'}
          />
          <Button
            onClick={this.getUTCDate}
            type={'primary'}
            style={{ width: 200 }}
          >点击获取含有时区信息的string</Button>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型1：</p>
          <p>{UTCDate1}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型2：</p>
          <p>{UTCDate2}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型3：</p>
          <p>{UTCDate3}</p>
        </div>
        <p> getLocateDateTime 与 getServerDateTime 方法检验</p>
        <div style={{ display: 'flex' }}>
          <Input
            onChange={this.onChange}
            value={this.state.value}
            style={{ width: 200 }}
          />
          <Button
            onClick={this.getLocaleDate}
            type={'primary'}
            style={{ width: 200 }}
          >检测测试日期</Button>
        </div>
        <br />
        <div style={{ display: 'flex' }}>
          <p>getLocateDateTime（服务端转客户端）：</p>
          <p>{localeDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDateTime（客户端转服务端）：</p>
          <p>{serverDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getLocateDate（服务端转客户端）：</p>
          <p>{localeDate}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDate（客户端转服务端）：</p>
          <p>{serverDate}</p>
        </div>
      </div >
      
    )
  }
}
```

### 长字符串中日期转换YYYY-MM-DD HH:mm(:ss)形式format={'YYYY-MM-DD HH:mm(:ss)'}

国际化与格式化转化

```jsx
import { Component, ReactText } from "react";
import { constants, DateTimePicker, Button, Input } from "@weapp/ui";
import { dayjs, getLocaleDateTime, getServerDateTime, getLocaleDate, getServerDate } from "@weapp/utils";

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

type DayDemoProps = {}
type DayDemoState = {
  value: string,
  localeDateTime: string,
  serverDateTime: string,
  localeDate: string,
  serverDate: string,
  date: any,
  UTCDate1: string,
  UTCDate2: string,
  UTCDate3: string,
}
export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '',
      localeDateTime: '',
      serverDateTime: '',
      localeDate: '',
      serverDate: '',
      date: new Date(),
      UTCDate1: '',
      UTCDate2: '',
      UTCDate3: '',
    }
  }

  onChange = (value: ReactText) => this.setState({ value: value.toString() })

  getLocaleDate = () => {
    const { value } = this.state
    this.setState({
      localeDateTime: getLocaleDateTime(value) as string,
      serverDateTime: getServerDateTime(value) as string,
      localeDate: getLocaleDate(value) as string,
      serverDate: getServerDate(value) as string
    })
  }
  getUTCDate = () => {
    const { date } = this.state
    this.setState({
      UTCDate1: dayjs(date).format(),
      UTCDate2: new Date(date).toISOString(),
      UTCDate3: new Date(date).toString()
    })
  }
  onDateTimePickerChange = (date: any) => {
    console.info('onDateTimePickerChange', date)
    this.setState({ date })
  }

  render() {
    const { localeDateTime, serverDateTime, localeDate, serverDate, date, UTCDate1, UTCDate2, UTCDate3 } = this.state
    return (
      <div className={prefixCls} >
        <p>选择日期时间</p>
        <div style={{ display: 'flex' }}>
          <DateTimePicker
            onChange={this.onDateTimePickerChange}
            value={date}
            isLocale={false}
            format={'YYYY-MM-DD HH:mm:ss'}
          />
          <Button
            onClick={this.getUTCDate}
            type={'primary'}
            style={{ width: 200 }}
          >点击获取含有时区信息的string</Button>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型1：</p>
          <p>{UTCDate1}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型2：</p>
          <p>{UTCDate2}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p> 获取含时区信息的字符串类型3：</p>
          <p>{UTCDate3}</p>
        </div>
        <p> getLocateDateTime 与 getServerDateTime 方法检验</p>
        <div style={{ display: 'flex' }}>
          <Input
            onChange={this.onChange}
            value={this.state.value}
            style={{ width: 200 }}
          />
          <Button
            onClick={this.getLocaleDate}
            type={'primary'}
            style={{ width: 200 }}
          >检测测试日期</Button>
        </div>
        <br />
        <div style={{ display: 'flex' }}>
          <p>getLocateDateTime（服务端转客户端）：</p>
          <p>{localeDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDateTime（客户端转服务端）：</p>
          <p>{serverDateTime}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getLocateDate（服务端转客户端）：</p>
          <p>{localeDate}</p>
        </div>
        <div style={{ display: 'flex' }}>
          <p>getServerDate（客户端转服务端）：</p>
          <p>{serverDate}</p>
        </div>
      </div >
      
    )
  }
}
```

### 自定义数据过滤

自定义数据过滤

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

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

type DayDemoProps = {}
type DayDemoState = {}

export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

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

    }
  }

  customFilter = (date: any) => {
    if (dayjs(date).date() % 2 === 0) {
      return true // 只允许选择偶数日期
    }
    return false
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>自定义控制数据过滤-单选</p>
        <DatePicker
          customDateFilter={this.customFilter}
        />
        <br />
        <p>自定义控制数据过滤-范围选择</p>
        <DatePicker
          customDateFilter={this.customFilter}
          isRange
        />
        <br />
      </div >
    )
  }
}
```

### 中文日期格式

中文日期格式

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

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

type DayDemoProps = {}
type DayDemoState = {}

export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

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

    }
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker
          defaultValue={new Date()}
          style={{ maxWidth: 300 }}
          chineseFormatParams={{
            type: 'date',
            dateFormatAry: ['Y', 'M', 'D']
          }}
        />
        <br />
        <br />
        <DateTimePicker
          defaultValue={new Date()}
          style={{ maxWidth: 300 }}
          chineseFormatParams={{
            type: 'date',
            dateFormatAry: ['Y', 'M', 'D', 'H', 'm']
          }}
        />
        <br />
        <br />
        <DatePicker
          defaultValue={new Date()}
          style={{ maxWidth: 300 }}
          chineseFormatParams={{
            type: 'week',
            weekPrefix: '周'
          }}
        />
        <br />
        <br />
        <DatePicker
          defaultValue={new Date()}
          style={{ maxWidth: 300 }}
          chineseFormatParams={{
            type: 'week',
            weekPrefix: ''
          }}
        />
      </div >
    )
  }
}
```

### 自定义渲染指定日期及单元格

可自定义渲染单元格以及单元格容器

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

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

type DayDemoProps = {}
type DayDemoState = {
  defaultDate: Date
  dateExtra: any
}

const dateExtra = {
  '2026-03-05': { info: true },
  '2026-03-10': { info: true },
  '2026-03-16': { info: true, sign: { text: '休', color: 'green' } },
  '2026-03-17': { info: false, sign: { text: '班', textIcon: 'Icon-WeChat03-o', color: '#FAAD14' } },
  '2026-03-18': { info: true, sign: { textIcon: 'Icon-robot', color: '#5d9cec' } },
  '2026-03-20': { sign: { textIcon: 'Icon-deep-thinking', color: '#5d9cec' } },
}

export default class DatePickerDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      defaultDate: new Date('2026-03-19'),
      dateExtra: {}
    }
  }

  getDateExtra = () => {
    const newData = Object.assign({}, this.state.dateExtra, dateExtra)
    this.setState({ dateExtra: newData })
  }

  renderCellWrap = (el: any) => {
    console.info('renderCellWrap el: ', el)
    return (
      <div style={{
        border: '1px solid green',
        flex: '0 0 calc(1/7 * 100%)',
        cursor: 'default',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        {el.children}
      </div>
    )
  }

  renderCellItem = (el: any) => {
    console.info('renderCellItem el: ', el)
    return (
      <div style={{ border: '1px solid red' }}>
        {el.children}
      </div>
    )
  }

  render() {
    const { defaultDate, dateExtra: state_dateExtra } = this.state
    return (
      <div className={prefixCls}>
        <p>日期单选</p>
        <DatePicker
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          dateExtra={dateExtra}
        />
        <br />
        <br />
        <p>日期单选异步获取数据</p>
        <Button onClick={this.getDateExtra}>点击异步获取dateExtra</Button>
        <DatePicker
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          dateExtra={state_dateExtra}
        />
        <br />
        <br />
        <p>日期单选自定义渲染单元容器</p>
        <DatePicker
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          renderCellWrap={this.renderCellWrap}
        />
        <br />
        <br />
        <p>日期单选自定义渲染单元格</p>
        <DatePicker
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          dateExtra={dateExtra}
          renderCellItem={this.renderCellItem}
        />
        <br />
        <br />
        <p>日期多选</p>
        <DatePicker
          defaultValue={[defaultDate]}
          style={{ maxWidth: 300 }}
          dateExtra={dateExtra}
          type={'days'}
        />
        <br />
        <br />
        <p>日期时间单选</p>
        <DateTimePicker
          panelType={'flat'}
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          dateExtra={dateExtra}
        />
        <br />
        <br />
        <p>日期时间单选</p>
        <DateTimePicker
          panelType={'trigger'}
          defaultValue={defaultDate}
          style={{ maxWidth: 300 }}
          dateExtra={dateExtra}
        />
      </div >
    )
  }
}
```

## API

### 注意：

```
1.当存在最大最小日期或者自定义配置日期过滤方法时，不限开始日期与不限结束日期按钮无法点击
2.当点击范围选择快捷选择按钮时，即使设置了最大最小日期或自定义日期过滤方法，也会优先按此按钮的日期处理
3.当同时传入了当前快捷选择的变量selectKey和value时，会优先按value的日期处理，可通过selectedKeyPrior来改变优先级
4.当传入了showFormat的格式时，如果需要手动输入该特殊格式，请严格按此格式输入，例如showFormat设置为'MM.DD.YYYY'时，输入'12.1.2012'则会判定为非法格式输入
```

### 类型说明：（请从@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);
};
4.需要根据指定格式过滤的日期数组类型
type DateTimeTypeAryType= 'Y' | 'M' | 'D' | 'H' | 'm' | 's';
5.日期面板底部快捷选择栏配置
type DayFooterVisibilityConfigType = {
  yesterday?: boolean
  today?: boolean
  tomorrow?: boolean
  unlimited?: boolean
}
```

#### DatePicker 工具方法

```typescript
1.根据日期快捷选择的key获取真实value值
 function getRangeInfoByPrimaryKey: (key: PrimaryKeyType, weekStart?: number, customMultiBtnData?: MultiBtnDataType[]) =>  MultiBtnDataType | -1;
 方法说明：
 (1)如果参数传递错误找不到该key，则返回-1
 (2)weekStart为每周的开始天数，默认为1（周一），0为周天
 (3)customMultiBtnData为自定义传入的data，可以自定义指定key和对应的日期区间

2.通过正则切除长字符串中的日期/日期时间，以数组形式抛出切割后的匹配对象
function getDateArrayFromString:(str: string, ) => any[];
方法说明：
(1)根据传入的长字符串，获取到其中有效的日期格式，并将其信息以数组的形式进行抛出
(2)注意监测的日期格式必须满足标准 YYYY-MM-DD 或者 YYYY-MM-DD HH:mm(:ss) 的格式才会被识别
(3)注意如果该日期前后都含有其他数字，则不会被识别
(4)此方法常可 getLocaleDateString 和 getServerDateString 搭配使用
(5)如果 getLocaleDateString 传入retainTimeFormat为true，则会根据原有识别格式来进行格式化
方法测试：
(1)测试用例string："第一个为1997-1-22 12:00，第二个为2012-01-12 12:00:00，第三个为2009-04-08 13:54，第四个为2009-04-0912:34"
(2)期望输出：
const output = [
    {
        "value": "2012-01-12 12:00:00",
        "index": 25,
        "length": 19,
        "time": "12:00:00",
        "timeFormat": "HH:mm:ss"
    },
    {
        "value": "2009-04-08 13:54",
        "index": 49,
        "length": 16,
        "time": "13:54",
        "timeFormat": "HH:mm"
    }
]
```

#### DatePicker 客户端与服务端的时区和格式转换方法

```typescript
1.根据服务器时间获取本地日期
 function getLocaleDate: (date: any, type?: 'string' | 'timestamp' | 'Date') => DateType;

2.根据本地时间获取服务器日期
 function getServerDate: (date: any, type?: 'string' | 'timestamp' | 'Date') => DateType;

3.根据服务器时间获取本地日期时间
 function getLocaleDateTime: (date: any, type?: 'string' | 'timestamp' | 'Date', typeAry?: DateTimeTypeAryType[]) => DateType;
方法说明：
(1)第二个参数默认为'string'
(2)如果传入第三个参数，则会根据传入的类型，切割出所需要的格式，其转换方法同下方的 `格式获取与转换方法` 

4.根据本地时间获取服务器日期时间
 function getServerDateTime: (date: any, type?: 'string' | 'timestamp' | 'Date') => DateType;

5.根据服务器时间获取本地日期时间数组
 function getLocaleDateAndTime: (date: any, type?: 'string' | 'timestamp' | 'Date') => string[];

6.根据本地时间获取服务器日期时间数组
 function getServerDateAndTime: (date: any, type?: 'string' | 'timestamp' | 'Date') => string[];

7.根据服务器时间获取本地格式化字符串
function getLocaleDateString:(str:string, retainTimeFormat?: boolean) => string;
方法说明：
(1)根据传入的长字符串，通过getDateArrayFromString（工具方法2）获取到其中有效的日期格式
(2)融合getLocaleDateTime方法（方法4），将其中的有效日期时间格式进行本地化处理
(3)返回将日期时间处理好后的长字符串
方法测试：
(1)转换规则：对于日期只需要进行格式化，对于日期时间则还需进行时区转换（假设时区相差两小时）
(2)期望输出string："第一个为1997-1-22 12:00，第二个为2012-01-12 10:00:00，第三个为2009-04-08 13:54:00，第四个为2009-04-0912:34"
(3)若如果传入retainTimeFormat为true，期望输出string："第一个为1997-1-22 12:00，第二个为2012-01-12 10:00:00，第三个为2009-04-08 13:54，第四个为2009-04-0912:34"

9.根据本地时间获取服务器格式化字符串
function getServerDateString:(str:string) => string;
方法说明：
(1)根据传入的长字符串，通过getDateArrayFromString（工具方法2）获取到其中有效的日期格式
(2)融合getServerDateTime方法（方法5），将其中的有效日期时间格式进行服务端处理
(3)返回将日期时间处理好后的长字符串
方法测试：
同 getLocaleDateString 方法
```

#### DatePicker 格式获取与转换方法

```typescript
1.获取个人设置的日期格式
 function getWindowDateShowFormat: () => any;

2.获取个人设置的日期时间格式
 function getWindowDateTimeShowFormat: () => any;

3.根据传入的或者窗口中的标准格式，根据传入的typeAry获取格式转化信息
function getCustomFormatByWindow:(typeAry: DateTimeTypeAryType[], format?: string)=>any;
方法说明：
(1)typeAry为仅需要展示的数组（必须要是['Y','M','D','H','m','s']的子集）如['Y','M','H','m']
(2)方法会优先根据传入的format进行对应格式切割，否则会根据window中储存的格式进行对应格式切割并返回相应数据对象
(3)注意传入的格式format必须同时含有['Y','M','D','H','m','s']的格式如'MM DD YYYY HH:mm:ss'或者'YYYY/MM/DD HH:mm:ss'，否则会出现意外情况
(4)如果format没有手动传入，则会默认取window中个人设置的的datetime_format

4.根据传入的日期以及或者窗口中的标准格式，根据传入的typeAry获取转化后的格式字符串（该方法继承了方法3）
function getCustomFormatDateByWindow:(date:any, typeAry: DateTimeTypeAryType[], format?: string)=>any;
方法说明：
方法整体思路与getCustomFormatByWindow（方法3）类似
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| 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[] | 否 |  |
| type | DatePicker 类型 | 'day' / 'month' / 'year' / 'halfyear' / 'days' / 'months'/ 'years' / 'halfyears' / 'season' / 'seasons' | 否 | 'day' |
| format | 指定抛出数据格式 | 自定义标准日期格式 string / 'timestamp' / 'Date' | 否 | YYYY-MM-DD |
| showFormat | 显示在输入框中的格式 | 自定义标准日期格式 string(详情请参照下方格式化占位符列表) | 否 | YYYY-MM-DD |
| showDayFooter | 是否显示单选天数面板底部快捷选择栏 | boolean | 否 | true |
| dayFooterVisibilityConfig | 底部按钮展示配置 | DayFooterVisibilityConfigType | 否 |  |
| weekStart | 每周的开始日 | number (0 代表周天 6 代表周六) | 否 | 1 |
| minDate | 最小日期 | DatePickerDateType | 否 |  |
| maxDate | 最大日期 | DatePickerDateType | 否 |  |
| customDateFilter | 自定义日期过滤 | (value: DatePickerDateType) => boolean 参数为当前日期，要求返回 boolean | 否 |  |
| filterHolidays | 是否过滤考勤接口节假日 | boolean | 否 |  |
| filterWeekdays | 默认不禁用，传入需要禁用的星期几，0代表周日，1代表周一，依次类推 | number[] | 否 |  |
| minRangeSelectDayNumber | 日期可选最小范围 | number | 否 |  |
| maxRangeSelectDayNumber | 日期可选最大范围 | number | 否 |  |
| autoFocus | 是否自动聚焦 | boolean | 否 | false |
| showUnlimit | 是否显示底部不限日期选择栏 | boolean | 否 | true |
| placeholder | 年/月/日/多个日期的占位符 | string | 否 |  |
| isRange | 是否为范围选择 | boolean | 否 | false |
| startPlaceholder | 日期范围开始占位符 | string | 否 |  |
| endPlaceholder | 日期范围结束占位符 | string | 否 |  |
| startUnlimitPlaceholder | 不限开始按钮占位符 | string | 否 |  |
| endUnlimitPlaceholder | 不限结束按钮占位符 | string | 否 |  |
| primaryKey | 原生范围快捷选择按钮配置参数 | DatePickerPrimaryKeyType[] | 否 |  |
| showMultiBtnGroup | 是否显示范围面板头部快捷选择栏 | boolean | 否 | true |
| customMultiBtnData | 头部自定义快捷按钮渲染(isRange 且 type 为 day 时生效) | DatePickerMultiBtnDataType[] | 否 |  |
| selectedKey | 当前快捷选择的变量 | PrimaryKeyType / string | 否 |  |
| selectedKeyPrior | 改变快捷选择和 value 的优先级 | boolean | 否 | false |
| onChange | 选中值改变时的回调 | (value: DatePickerDateType / DatePickerDateType[], key: DatePickerPrimaryKeyType / string, multiBtnData?: DatePickerMultiBtnDataType) => {} | 否 |  |
| onPanelOpen | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onPanelClose | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onClear | 选择器清空的回调 | () => {} | 否 |  |
| rangeReadOnlyEmpty | 范围选择两数据都为空时是否展示空的 span | boolean | 否 |  |
| 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 |
| renderCellItem | 单个日期自定义渲染 | (data?: any) => React.ReactNode | 否 |  |
| renderCellWrap | 日期单元格外层包裹元素的自定义渲染 | (data?: any) => React.ReactNode | 否 |  |
### 格式化占位符列表：

| 占位符 | 输出 | 详情 |
| --- | --- | --- |
| `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 |
