Element-React Time Picker 時間選擇器

用于選擇或輸入日期

固定時間點

提供幾個固定的時間點供用戶選擇

使用 TimeSelect 標簽，分別通過star、end和step指定可選的起始時間、結束時間和步長

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="選擇時間"
      />
  )
}

任意時間點

可以選擇任意時間

使用 TimePicker 標簽，分別通過star、end和step指定可選的起始時間、結束時間和步長

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="選擇時間"
      value={this.state.value}
      />
  )
}

固定時間范圍

若先選擇開始時間，則結束時間內備選項的狀態(tài)會隨之改變

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="選擇時間"
        />


      <TimeSelect
        start="08:30"
        step="00:15"
        end="18:30"
        onChange={this.handleEndUpdate.bind(this)}
        value={this.state.endDate}
        minTime={this.state.startDate}
        placeholder="選擇時間"
        />
    </div>


  )
}

任意時間范圍

可選擇任意的時間范圍

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="選擇時間"
      value={this.state.value}
      />
  )
}

公共參數(shù)

TimeSelect

TimePicker

TimeRangePicker