Element-React Date Picker 日期選擇器

用于選擇或輸入日期

選擇日

以「日」為基本單位，基礎(chǔ)的日期選擇控件

基本單位由type屬性指定?？旖葸x項需配置shortcuts，禁用日期通過 disabledDate 設(shè)置，傳入函數(shù)

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

其他日期單位

通過擴展基礎(chǔ)的日期選擇，可以選擇周、月、年

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


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


  return (
    <div className="source">
      <div className="block">
        <span className="demonstration">周</span>
        <DatePicker
          value={value1}
          placeholder="選擇周"
          onChange={date=>{
            console.debug('week DatePicker1 changed: ', date)
            this.setState({value1: date})
          }}
          format="yyyy 第 WW 周"
          selectionMode="week"
          />
      </div>
      <div className="block">
        <span className="demonstration">月</span>
        <DatePicker
          value={value2}
          placeholder="選擇月"
          onChange={date=>{
            console.debug('month DatePicker changed: ', date)
            this.setState({value2: date})
          }}
          selectionMode="month"
          />
      </div>
      <div className="block">
        <span className="demonstration">年</span>
        <DatePicker
          value={value3}
          placeholder="選擇年"
          onChange={date=>{
            console.debug('year DatePicker changed: ', date)
            this.setState({value3: date})
          }}
          selectionMode="year"
          align="right"
          />
      </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">默認(rèn)</span>
        <DateRangePicker
          value={value1}
          placeholder="選擇日期范圍"
          onChange={date=>{
            console.debug('DateRangePicker1 changed: ', date)
            this.setState({value1: date})
          }}
          />
      </div>
      <div className="block">
        <span className="demonstration">帶快捷選項</span>
        <DateRangePicker
          value={value2}
          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>
  )
}

公共參數(shù)

DatePicker

DateRangePanel