Element-React DateTimerPicker 日期時(shí)間選擇器

在同一個(gè)選擇器里選擇日期和時(shí)間

日期和時(shí)間點(diǎn)

通過(guò)設(shè)置isShowTime，即可在同一個(gè)選擇器里同時(shí)進(jìn)行日期和時(shí)間的選擇?？旖葸x項(xiàng)的使用方法與 Date Picker 相同。

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


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


  return (
    <div className="source">
      <div className="block">
        <span className="demonstration">默認(rèn)</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">帶快捷選項(xiàng)</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>
  )
}

選擇日期范圍

可在一個(gè)選擇器中便捷地選擇一個(gè)時(shí)間范圍

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">默認(rèn)</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">帶快捷選項(xiàng)</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: '最近一個(gè)月',
            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: '最近三個(gè)月',
            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>
  )
}

參數(shù)

和 DatePicker 相同