Time Picker 时间选择器

Time Picker 时间选择器

用于选择或输入日期

固定时间点

提供几个固定的时间点供用户选择

:::demo 使用 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="选择时间"
      />
  )
}

:::

任意时间点

可以选择任意时间 :::demo 使用 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}
      />
  )
}

:::

固定时间范围

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

:::demo

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>

  )
}

:::

任意时间范围

可选择任意的时间范围

:::demo 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