Element-React Time Picker 時(shí)間選擇器

用于選擇或輸入日期

固定時(shí)間點(diǎn)

提供幾個(gè)固定的時(shí)間點(diǎn)供用戶(hù)選擇

使用 TimeSelect 標(biāo)簽，分別通過(guò)star、end和step指定可選的起始時(shí)間、結(jié)束時(shí)間和步長(zhǎng)

constructor(props) {
  super(props)
  this.state = {
    value: new Date(2016, 9, 10, 8, 30),
  }
}
handleUpdate(value) {
  console.debug('time-select update: ', value)
}
render() {
  return (
    <TimeSelect
      start="08:30"
      step="00:15"
      end="18:30"
      maxTime="12:30"
      onChange={this.handleUpdate.bind(this)}
      value={this.state.value}
      placeholder="選擇時(shí)間"
      />
  )
}

任意時(shí)間點(diǎn)

可以選擇任意時(shí)間

使用 TimePicker 標(biāo)簽，分別通過(guò)star、end和step指定可選的起始時(shí)間、結(jié)束時(shí)間和步長(zhǎng)

constructor(props) {
  super(props)
  this.state = {
    value: new Date(2016, 9, 10, 18, 40)
  }
}
handleUpdate(value) {
  console.debug('time-picker update: ', value)
}
render() {
  return (
    <TimePicker
      onChange={this.handleUpdate.bind(this)}
      selectableRange="18:30:00 - 20:30:00"
      placeholder="選擇時(shí)間"
      value={this.state.value}
      />
  )
}

固定時(shí)間范圍

若先選擇開(kāi)始時(shí)間，則結(jié)束時(shí)間內(nèi)備選項(xiàng)的狀態(tài)會(huì)隨之改變

constructor(props) {
  super(props)
  this.state = {
    startDate: new Date(2016, 9, 10, 14, 30),
    endDate: new Date(2016, 9, 10, 15, 30)
  }
}
handleStartUpdate(startDate) {
  console.debug('time-select startDate update: ', startDate)
  this.setState({startDate})
}
handleEndUpdate(endDate){
  console.debug('time-select endDate update: ', endDate)
  this.setState({endDate})
}
render() {
  return (
    <div>
      <TimeSelect
        start="08:30"
        step="00:15"
        end="18:30"
        onChange={this.handleStartUpdate.bind(this)}
        value={this.state.startDate}
        placeholder="選擇時(shí)間"
        />
      <TimeSelect
        start="08:30"
        step="00:15"
        end="18:30"
        onChange={this.handleEndUpdate.bind(this)}
        value={this.state.endDate}
        minTime={this.state.startDate}
        placeholder="選擇時(shí)間"
        />
    </div>
  )
}

任意時(shí)間范圍

可選擇任意的時(shí)間范圍

blah

constructor(props) {
  super(props)
  this.state = {
    value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
  }
}
handleUpdate(value) {
  console.debug('time-picker update: ', value)
}
render() {
  return (
    <TimeRangePicker
      pickerWidth={300}
      onChange={this.handleUpdate.bind(this)}
      placeholder="選擇時(shí)間"
      value={this.state.value}
      />
  )
}

公共參數(shù)

TimeSelect

TimePicker

TimeRangePicker