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}
      />
  )
}

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

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}
      />
  )
}

公共参数

TimeSelect

TimePicker

TimeRangePicker