# TimePicker 时间选择器

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

## 代码演示

### 选择时间点(分钟单列)

可以选择任意时间

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

type TimeDemoStates = {
  value: string;
  customValue: string;
  popupVisible: boolean;
}

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

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      value: '12:0:0',
      customValue: '12:0:0',
      popupVisible: false,
    }
  }

  onChange = (value: string | string[]) => { console.info('onChange', value) }
  onValueChange = (value: string | string[]) => {
    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}>customRender: {this.state.customValue}</div>
  }
  customRenderChange = (value: string | string[]) => {
    console.info('customRenderChange', value)
    this.setState({
      customValue: value as string,
      popupVisible: false
    })
  }
  onPanelOpen = (value: string | string[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: string | string[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  valueToMax = () => { this.setState({ value: '23:59:59' }) }
  valueToMiddle = () => { this.setState({ value: '12:12:12' }) }
  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>
        <TimePicker
          panelType={'simple'}
          defaultValue={'12:12'}
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>自带空面板默认值</p>
        <TimePicker
          panelType={'simple'}
          defaultPanelValue={'15:16'}
          onChange={this.onChange}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>禁用</p>
        <TimePicker
          panelType={'simple'}
          defaultValue={"12:00"}
          disabled
        />
        <br />
        <br />
        <p>只读</p>
        <TimePicker
          panelType={'simple'}
          defaultValue={"12:00"}
          readOnly
        />
        <br />
        <p>受控：value为'12:0:0'</p>
        <div style={{ display: 'flex' }}>
          <TimePicker
            panelType={'simple'}
            format={'HH:mm:ss'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset} style={{ marginRight: '5px' }}>重置</Button>
          <Button type={'success'} size={'small'} onClick={this.valueToMax} style={{ marginRight: '5px' }}>设置时间为'23:59:59'</Button>
          <Button type={'danger'} size={'small'} onClick={this.valueToMiddle}>设置时间为'12:12:12'</Button>
        </div>
        <br />
        <p>受控不更新值：value为'12:00:00'</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          value={'12:00:00'}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 更改时间格式（精确到秒）</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 更改时间格式（只精确到时）</p>
        <TimePicker
          panelType={'simple'}
          format={'HH'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <TimePicker
          panelType={'simple'}
          bindTriggerContainer
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <TimePicker
          panelType={'simple'}
          placeholder={'自定义placeholder'}
          className={'time-picker-demo'}
          popupVisible={this.state.popupVisible}
          style={{
            border: '1px solid red',
            height: '30px'
          }}
          customRender={this.customRender}
          onChange={this.customRenderChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          allowClear={false}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          width={100}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          maxWidth={300}
        />
        <p>选中即改变（时分）</p>
        <TimePicker
          panelType={'simple'}
          defaultValue={"12:00:00"}
          changeOnSelect
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>选中即改变（时分秒）</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          changeOnSelect
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择时间点(分钟多列平铺)

可以选择任意时间

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

type TimeDemoStates = {
  value: string;
  customValue: string;
  popupVisible: boolean;
  format: any
}

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

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      value: '12:0:0',
      customValue: '12:0:0',
      popupVisible: false,
      format: 'HH:mm'
    }
  }

  onChange = (value: string | string[]) => { console.info('onChange', value) }
  onValueChange = (value: string | string[]) => {
    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}>customRender: {this.state.customValue}</div>
  }
  customRenderChange = (value: string | string[]) => {
    console.info('customRenderChange', value)
    this.setState({
      customValue: value as string,
      popupVisible: false
    })
  }
  onPanelOpen = (value: string | string[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: string | string[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }
  valueToMax = () => { this.setState({ value: '23:59:59' }) }
  valueToMiddle = () => { this.setState({ value: '12:12:12' }) }
  changeFormat = () => {
    const newFormat = this.state.format !== 'HH:mm:ss' ? 'HH:mm:ss' : 'HH:mm'
    this.setState({ format: newFormat })
  }
  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>
        <TimePicker
          panelType={'detail'}
          defaultValue={'12:12'}
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>自带控面板默认值</p>
        <TimePicker
          panelType={'detail'}
          defaultPanelValue={'15:16'}
          onChange={this.onChange}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>禁用</p>
        <TimePicker
          panelType={'detail'}
          defaultValue={"12:00"}
          disabled
        />
        <br />
        <br />
        <p>只读</p>
        <TimePicker
          panelType={'detail'}
          defaultValue={"12:00"}
          readOnly
        />
        <br />
        <p>受控：value为'12:0:0'</p>
        <div style={{ display: 'flex' }}>
          <TimePicker
            panelType={'detail'}
            format={'HH:mm:ss'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset} style={{ marginRight: '5px' }}>重置</Button>
          <Button type={'success'} size={'small'} onClick={this.valueToMax} style={{ marginRight: '5px' }}>设置时间为'23:59:59'</Button>
          <Button type={'danger'} size={'small'} onClick={this.valueToMiddle}>设置时间为'12:12:12'</Button>
        </div>
        <br />
        <p>受控不更新值：value为'12:00:00'</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          value={'12:0:0'}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 更改时间格式</p>
        <div style={{ display: 'flex' }}>
          <TimePicker
            panelType={'detail'}
            format={this.state.format}
            onChange={this.onChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.changeFormat}>{`重置格式(当前时间格式:${this.state.format})`}</Button>
        </div>
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <TimePicker
          panelType={'detail'}
          bindTriggerContainer
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <TimePicker
          panelType={'detail'}
          placeholder={'自定义placeholder'}
          className={'time-picker-demo'}
          popupVisible={this.state.popupVisible}
          style={{
            border: '1px solid red',
            height: '30px'
          }}
          customRender={this.customRender}
          onChange={this.customRenderChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          allowClear={false}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          width={100}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          maxWidth={300}
        />
        <br />
        <br />
        <p>选中即改变（时分）</p>
        <TimePicker
          panelType={'detail'}
          defaultValue={"12:00:00"}
          changeOnSelect
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>选中即改变（时分秒）</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          defaultValue={"12:00:00"}
          changeOnSelect
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择时间区间(分钟单列)

可选择任意的时间范围

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

type TimeRangeDemoProps = {}
type TimeRangeDemoStates = {
  value: string[];
  format: any;
}

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

export default class TimePickerDemo extends Component<TimeRangeDemoProps, TimeRangeDemoStates> {

  constructor(props: TimeRangeDemoStates) {
    super(props)
    this.state = {
      value: ['12:0:0', '13:0:5'],
      format: 'HH:mm'
    }
  }

  onChange = (value: string | string[]) => { console.info('onChange', value) }
  onOpen = (value: string | string[]) => { console.info('onOpen', value) }
  onClose = (value: string | string[]) => { console.info('onClose', value) }
  onValueChange = (value: string | string[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string[] })
  }
  reset = () => { this.setState({ value: [] }) }
  changeFormat = () => {
    const newFormat = this.state.format !== 'HH:mm:ss' ? 'HH:mm:ss' : 'HH:mm'
    this.setState({ format: newFormat })
  }
  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>
        <TimePicker
          panelType={'simple'}
          isRange
          onChange={this.onChange}
          onInputClick={this.onInputClick}
          onInputFocus={this.onInputFocus}
          onInputBlur={this.onInputBlur}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>禁用</p>
        <TimePicker
          panelType={'simple'}
          isRange={true}
          defaultValue={['06:00', '07:05']}
          disabled
        />
        <br />
        <br />
        <p>只读</p>
        <TimePicker
          panelType={'simple'}
          isRange={true}
          defaultValue={['06:00', '07:05']}
          readOnly
        />
        <br />
        <p>受控：value为['12:0:0','13:0:5']</p>
        <div style={{ display: 'flex' }}>
          <TimePicker
            panelType={'simple'}
            format={'HH:mm:ss'}
            isRange={true}
            value={this.state.value}
            onPanelOpen={this.onOpen}
            onPanelClose={this.onClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为['12:00:00','13:00:05']</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          value={['12:00:00', '13:00:05']}
          onPanelOpen={this.onOpen}
          onPanelClose={this.onClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 更改时间格式</p>
        <div>
          <TimePicker
            panelType={'simple'}
            format={this.state.format}
            isRange={true}
            onChange={this.onChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.changeFormat}>{`重置格式(当前时间格式:${this.state.format})`}</Button>
        </div>
        <br />
        <br />

        <p>自定义className、style与自定义triggerProps</p>
        <TimePicker
          panelType={'simple'}
          format={`HH:mm`}
          isRange={true}
          startPlaceholder={'自定义placeholder1'}
          endPlaceholder={'自定义placeholder2'}
          className={'time-picker-demo'}
          style={{ border: '1px solid red' }}
          triggerProps={{ popupPlacement: 'right' }}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          defaultValue={['06:00:00', '07:05:05']}
          allowClear={false}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          defaultValue={['06:00:00', '07:05:05']}
          width={150}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          defaultValue={['06:00:00', '07:05:05']}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          defaultValue={['06:00:00', '07:05:05']}
          maxWidth={400}
        />
        <br />
        <br />
        <p>选中即改变（时分）</p>
        <TimePicker
          panelType={'simple'}
          isRange
          changeOnSelect
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>选中即改变（时分秒）</p>
        <TimePicker
          panelType={'simple'}
          isRange
          format={'HH:mm:ss'}
          changeOnSelect
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 选择时间区间(分钟多列平铺)

可以选择任意的时间范围

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

type TimeRangeDemoProps = {}
type TimeRangeDemoStates = {
  value: string[];
  format: any;
}

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

export default class TimePickerDemo extends Component<TimeRangeDemoProps, TimeRangeDemoStates> {

  constructor(props: TimeRangeDemoStates) {
    super(props)
    this.state = {
      value: ['12:0:0', '13:0:5'],
      format: 'HH:mm'
    }
  }

  onChange = (value: string | string[]) => { console.info('onChange', value) }
  onOpen = (value: string | string[]) => { console.info('onOpen', value) }
  onClose = (value: string | string[]) => { console.info('onClose', value) }
  onValueChange = (value: string | string[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string[] })
  }
  reset = () => { this.setState({ value: [] }) }
  changeFormat = () => {
    const newFormat = this.state.format !== 'HH:mm:ss' ? 'HH:mm:ss' : 'HH:mm'
    this.setState({ format: newFormat })
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <TimePicker
          panelType={'detail'}
          isRange
          onChange={this.onChange}
          showFormat={'HH:mm A'}
        />
        <br />
        <br />
        <p>禁用</p>
        <TimePicker
          panelType={'detail'}
          isRange
          defaultValue={['06:00', '07:05']}
          disabled
        />
        <br />
        <br />
        <p>只读</p>
        <TimePicker
          panelType={'detail'}
          isRange
          defaultValue={['06:00', '07:05']}
          readOnly
        />
        <br />
        <p>受控：value为['12:0:0','13:0:5']</p>
        <div style={{ display: 'flex' }}>
          <TimePicker
            panelType={'detail'}
            format={'HH:mm:ss'}
            isRange
            value={this.state.value}
            onPanelOpen={this.onOpen}
            onPanelClose={this.onClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为['12:00:00','13:00:05']</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          value={['12:00:00', '13:00:05']}
          onPanelOpen={this.onOpen}
          onPanelClose={this.onClose}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 format 更改时间格式</p>
        <div>
          <TimePicker
            panelType={'detail'}
            format={this.state.format}
            isRange
            onChange={this.onChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.changeFormat}>{`重置格式(当前时间格式:${this.state.format})`}</Button>
        </div>
        <br />
        <br />
        <p>限定时间范围：minTime为12:40:30，maxTime为18:30:20</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
        />
        <br />
        <br />
        <p>传入时间不在范围内时，按原数据显示：defaultValue为['12:00:00','19:00:00']</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
          defaultValue={['12:00:00', '19:00:00']}
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <TimePicker
          panelType={'detail'}
          format={`HH:mm`}
          isRange
          startPlaceholder={'自定义placeholder1'}
          endPlaceholder={'自定义placeholder2'}
          className={'time-picker-demo'}
          style={{ border: '1px solid red' }}
          triggerProps={{ popupPlacement: 'right' }}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          defaultValue={['06:00:00', '07:05:05']}
          allowClear={false}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          defaultValue={['06:00:00', '07:05:05']}
          width={150}
        />
        <br />
        <br />
        <p>不限制最大宽度</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          defaultValue={['06:00:00', '07:05:05']}
          needMaxWidth={false}
        />
        <br />
        <br />
        <p>自定义最大宽度</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange
          defaultValue={['06:00:00', '07:05:05']}
          maxWidth={400}
        />
        <br />
        <br />
        <p>选中即改变（时分）</p>
        <TimePicker
          panelType={'detail'}
          isRange
          changeOnSelect
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>选中即改变（时分秒）</p>
        <TimePicker
          panelType={'detail'}
          isRange
          format={'HH:mm:ss'}
          changeOnSelect
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 设置边界时间

自定义控制最大最小值

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

type TimeDemoStates = {
  minTime?: string
  maxTime?: string
}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      minTime: '',
      maxTime: ''
    }
  }

  onMinValueChange = (value: string | string[]) => this.setState({ minTime: value as string })
  onMaxValueChange = (value: string | string[]) => this.setState({ maxTime: value as string })

  render() {
    const { minTime, maxTime } = this.state
    return (
      <div className={prefixCls}>
        <h3>自定义控制</h3>
        <p>自定义输入最大最小时间</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最小时间：</span>
            <TimePicker
              format={'HH:mm:ss'}
              value={minTime}
              onChange={this.onMinValueChange}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最大时间：</span>
            <TimePicker
              format={'HH:mm:ss'}
              value={maxTime}
              onChange={this.onMaxValueChange}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板1：</span>
            <TimePicker
              format={'HH:mm:ss'}
              minTime={minTime}
              maxTime={maxTime}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板2：</span>
            <TimePicker
              panelType={'simple'}
              format={'HH:mm:ss'}
              minTime={minTime}
              maxTime={maxTime}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板3：</span>
            <TimePicker
              format={'HH:mm:ss'}
              isRange
              minTime={minTime}
              maxTime={maxTime}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板4：</span>
            <TimePicker
              panelType={'simple'}
              format={'HH:mm:ss'}
              isRange
              minTime={minTime}
              maxTime={maxTime}
            />
          </div>
        </div>
        <br />
        <h3>单个时间</h3>
        <p>限定时间范围：minTime为12:30:20，maxTime为12:30:20</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          minTime={"12:30:20"}
          maxTime={"12:30:20"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          minTime={"12:30:20"}
          maxTime={"12:30:20"}
        />
        <br />
        <br />
        <p>限定时间范围：minTime为12:30:30，maxTime为12:50:30</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          minTime={"12:30:30"}
          maxTime={"12:50:30"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          minTime={"12:30:30"}
          maxTime={"12:50:30"}
        />
        <br />
        <br />
        <p>限定时间范围：minTime为12:30:00，maxTime为13:50:00</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          minTime={"12:30:00"}
          maxTime={"13:50:00"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          minTime={"12:30:00"}
          maxTime={"13:50:00"}
        />
        <br />
        <br />
        <p>限定时间范围：minTime为12:40:30，maxTime为18:30:20</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
        />
        <br />
        <br />
        <p>传入时间不在范围内时，按原数据显示：defaultValue为'12:00:00'</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
          defaultValue={'12:00:00'}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
          defaultValue={'12:00:00'}
        />
        <h3>时间范围</h3>
        <p>限定时间范围：minTime为12:40:30，maxTime为18:30:20</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
        />
        <br />
        <br />
        <p>限定时间范围：minTime为12:30:20，maxTime为12:30:20</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:30:20"}
          maxTime={"12:30:20"}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:30:20"}
          maxTime={"12:30:20"}
        />
        <br />
        <br />
        <p>传入时间不在范围内时，按原数据显示：defaultValue为['12:00:00','19:00:00']</p>
        <TimePicker
          panelType={'detail'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
          defaultValue={['12:00:00', '19:00:00']}
        />
        <br />
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          isRange={true}
          minTime={"12:40:30"}
          maxTime={"18:30:20"}
          defaultValue={['12:00:00', '19:00:00']}
        />
      </div>
    )
  }
}
```

### 设置步长

自定义控制步长或步长列

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

const { InputNumber } = Input;

type TimeDemoStates = {
  hourStep: ReactText
  minuteStep: ReactText
  secondStep: ReactText
}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      hourStep: 2,
      minuteStep: 5,
      secondStep: 10,
    }
  }

  onHourStepChange = (value: ReactText) => this.setState({ hourStep: value })
  onMinuteStepChange = (value: ReactText) => this.setState({ minuteStep: value })
  onSecondStepChange = (value: ReactText) => this.setState({ secondStep: value })

  render() {
    const { hourStep, minuteStep, secondStep, } = this.state
    const hs = hourStep ? Number(hourStep) : 1
    const ms = minuteStep ? Number(minuteStep) : 1
    const ss = secondStep ? Number(secondStep) : 1
    return (
      <div className={prefixCls}>
        <h3>自定义控制</h3>
        <p>自定义输入最大最小时间</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置时针步长：</span>
            <span><InputNumber value={hourStep} onChange={this.onHourStepChange} /></span>
          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置分针步长：</span>
            <span><InputNumber value={minuteStep} onChange={this.onMinuteStepChange} /></span>

          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置秒针步长：</span>
            <span><InputNumber value={secondStep} onChange={this.onSecondStepChange} /></span>
          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板1：</span>
            <TimePicker
              format={'HH:mm:ss'}
              hourStep={hs}
              minuteStep={ms}
              secondStep={ss}
            />
          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板2：</span>
            <TimePicker
              panelType={'simple'}
              format={'HH:mm:ss'}
              hourStep={hs}
              minuteStep={ms}
              secondStep={ss}
            />
          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板3：</span>
            <TimePicker
              format={'HH:mm:ss'}
              isRange
              hourStep={hs}
              minuteStep={ms}
              secondStep={ss}
            />
          </div>
          <div style={{ display: 'flex'}}>
            <span style={{ display: 'flex', alignItems: 'center' }}>展示面板4：</span>
            <TimePicker
              panelType={'simple'}
              format={'HH:mm:ss'}
              isRange
              hourStep={hs}
              minuteStep={ms}
              secondStep={ss}
            />
          </div>
        </div>
        <h3>自定义渲染</h3>
        <p>使用 hourList minuteList secondList 自定义渲染时分秒list列</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          hourList={[4, 8, 12, 16, 20]}
          // minuteList={}
          secondList={[30]}
        />
        <br />
        <br />
        <p>注意：自定义渲染list列只会在初始化时执行一次</p>
        <TimePicker
          isRange
          panelType={'simple'}
          format={'HH:mm:ss'}
          hourList={[4, 8, 12, 16, 20]}
          // minuteList={}
          secondList={[30]}
        />
      </div>
    )
  }
}
```

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

融合后台系统默认配置

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

type TimeDemoStates = {

}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  render() {

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

## API

### 注意：

```
时间面板自动关闭逻辑
1.如果时间格式是【时分秒】：点击秒->自动关闭面板并触发onChange，如果只点了时没点击分秒的话->可点击确定按钮关闭面板并触发onChange
2.如果时间格式是【时分】：点击分->自动关闭面板并触发onChange，如果只点了时没点击分的话->可点击确定按钮关闭面板并触发onChange
3.如果时间格式是【分秒】：点击秒->自动关闭面板并触发onChange，如果只点了分没点击秒的话->可点击确定按钮关闭面板并触发onChange
4.当开启了changeOnSelect参数，点击时分秒都会触发onChange，此时只能通过点击确定按钮关闭面板并触发onChange
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| panelType | 面板的ui交互 | 'simple' / 'detail' | 否 | 'detail' |
| disabled | 是否禁用 | boolean | 否 | false |
| readOnly | 选择器是否完全只读 | boolean | 否 | false |
| triggerProps | trigger 的 props | 参考 trigger 组件的 props | 否 |  |
| bindTriggerContainer | 是否将 trigger 弹出层固定在该节点下 | boolean | 否 | false |
| width | 选择器宽度 | number | 否 |  |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| value | 日期时间受控值 | string / string[] | 否 |  |
| defaultValue | 日期时间默认值 | string / string[] | 否 |  |
| defaultPanelValue | 在选中值为空是面板展开的日期时间默认值 | string | 否 |  |
| format | 时间格式 | HH:mm:ss / HH:mm / mm:ss | 否 | HH:mm |
| minTime | 最小时间 | string | 否 |  |
| maxTime | 最大时间 | string | 否 |  |
| hourStep | 时的步长 | number | 否 | 1 |
| minuteStep | 分的步长 | number | 否 | 1 |
| secondStep | 秒的步长 | number | 否 | 1 |
| hourList | 自定义时针的列 | number[] | 否 |  |
| minuteList | 自定义分针的列 | number[] | 否 |  |
| secondList | 自定义秒针的列 | number[] | 否 |  |
| isRange | 是否为范围选择 | boolean | 否 | false |
| autoFocus | 是否自动聚焦 | boolean | 否 | false |
| placeholder | 单个时间点占位符 | string | 否 |  |
| startPlaceholder | 范围选择开始占位符 | string | 否 |  |
| endPlaceholder | 范围选择结束占位符 | string | 否 |  |
| onPanelOpen | 面板打开时的回调 | (value:string / string[]) => {} | 否 |  |
| onPanelClose | 面板打开时的回调 | (value:string / string[]) => {} | 否 |  |
| onChange | 选中值改变时的回调 | (value:string / string[]) => {} | 否 |  |
| openInputFormat | 是否开启input的输入校验 | 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 |
| changeOnSelect | 选中即改变(面板不会自动关闭且只在mode为'detail'时生效) | boolean | 否 | false |
| onlyPanel | 是否开启单面板模式(demo请搜索date-panel查看) | boolean | 否 | false |
| showFooter | 是否展示底部确认取消操作栏 | boolean | 否 | true |
| hourTimeFormatAutoConfirm | 时选择器模式下是否自动确认 | 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 |
