codecamp

Element-React Time Picker 时间选择器

用于选择或输入日期

固定时间点

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

使用 TimeSelect 标签,分别通过starendstep指定可选的起始时间、结束时间和步长

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 标签,分别通过starendstep指定可选的起始时间、结束时间和步长

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

公共参数

参数 说明 类型 可选值 默认值
align 对齐方式 string left, center, right left
placeholder 占位内容 string
isShowTrigger 是否显示图标 bool - -
isReadOnly 只读 boolean false
isDisabled 是否禁用 boolean false
onFocus onFocus func:(TimeSelectReactComponent)=>() -
onBlur onBlur func:(TimeSelectReactComponent)=>() -
onChange onChange func:(value)=>() -

TimeSelect

参数 说明 类型 可选值 默认值
value date/null -
start 开始时间 string 09:00
end 结束时间 string 18:00
step 间隔时间 string 00:30
minTime 最小时间 date -
maxTime 最大时间 date -

TimePicker

参数 说明 类型 可选值 默认值
value date/null -
selectableRange 可选时间段,例如 '18:30:00 - 20:30:00' 或者传入数组 ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] string/string[]

TimeRangePicker

参数 说明 类型 可选值 默认值
value date[]/null -
selectableRange 可选时间段,例如 '18:30:00 - 20:30:00' 或者传入数组 ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] string/string[]
rangeSeparator 选择范围时的分隔符 string - ' - '
Element-React Slider 滑块
Element-React Date Picker 日期选择器
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }