Element-React DateTimerPicker 日期时间选择器

在同一个选择器里选择日期和时间

日期和时间点

通过设置isShowTime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

constructor(props) {
  super(props)
  this.state = {}
}


render() {
  const {value1, value2} = this.state


  return (
    <div className="source">
      <div className="block">
        <span className="demonstration">默认</span>
        <DatePicker
          value={value1}
          isShowTime={true}
          placeholder="选择日期"
          onChange={date=>{
            console.debug(DatePicker1 changed: , date)
            this.setState({value1: date})
          }}
          disabledDate={time=>time.getTime() < Date.now() - 8.64e7}
          />
      </div>
      <div className="block">
        <span className="demonstration">带快捷选项</span>
        <DatePicker
          ref={e=>this.datepicker2 = e}
          isShowTime={true}
          value={value2}
          align="right"
          placeholder="选择日期"
          onChange={date=>{
            console.debug(DatePicker2 changed: , date)
            this.setState({value2: date})


          }}
          shortcuts={[{
            text: 今天,
            onClick: (picker)=> {
              this.setState({value2: new Date()})
              this.datepicker2.togglePickerVisible()
            }
          }, {
            text: 昨天,
            onClick: (picker)=> {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              this.setState({value2: date})
              this.datepicker2.togglePickerVisible()
            }
          }, {
            text: 一周前,
            onClick: (picker)=> {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              this.setState({value2: date})
              this.datepicker2.togglePickerVisible()
            }
          }]}
          />
      </div>
    </div>
  )
}

选择日期范围

可在一个选择器中便捷地选择一个时间范围

constructor(props) {
  super(props)
  this.state = {value1: null, value2: null}
}


render() {
  const {value1, value2} = this.state


  return (
    <div className="source">
      <div className="block">
        <span className="demonstration">默认</span>
        <DateRangePicker
          value={value1}
          placeholder="选择日期范围"
          isShowTime={true}
          onChange={date=>{
            console.debug(DateRangePicker1 changed: , date)
            this.setState({value1: date})
          }}
          />
      </div>
      <div className="block">
        <span className="demonstration">带快捷选项</span>
        <DateRangePicker
          value={value2}
          isShowTime={true}
          placeholder="选择日期范围"
          align="right"
          ref={e=>this.daterangepicker2 = e}
          onChange={date=>{
            console.debug(DateRangePicker2 changed: , date)
            this.setState({value2: date})
          }}
          shortcuts={[{
            text: 最近一周,
            onClick: ()=> {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);


              this.setState({value2: [start, end]})
              this.daterangepicker2.togglePickerVisible()
            }
          }, {
            text: 最近一个月,
            onClick: ()=> {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);


              this.setState({value2: [start, end]})
              this.daterangepicker2.togglePickerVisible()
            }
          }, {
            text: 最近三个月,
            onClick: ()=> {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              this.setState({value2: [start, end]})
              this.daterangepicker2.togglePickerVisible()
            }
          }]}
          />
      </div>
    </div>
  )
}

参数

和 DatePicker 相同