全网react+飞冰(ice)UI框架组件实例(9)DatePicker 日期选择框

420 阅读1分钟

关于日期选择框组件,也是非常重要的,在项目中对于如何不能选择之后的数据,在这个问题上面也是花了比较长的时间去研究的,最后使用了一个叫moment的插件,才解决了这个问题!

单个选择日期带之后的日期不能选的功能

import moment from 'moment';
const currentDate = moment();

const disabledDate = function (date, view) {
    switch (view) {
      case 'date':
        return date.valueOf() >= currentDate.valueOf();
      case 'year':
        return date.year() > currentDate.year();
      case 'month':
        return date.year() * 100 + date.month() > currentDate.year() * 100 + currentDate.month();
      default: return false;
    }
  };
  
<FormItem colSpan={4} label="时间筛选: ">
    <DatePicker hasClear onChange={(val) => {
      const startTime = val || ''
      const conditionCopy = common.changeJson(condition)
      conditionCopy.date = [startTime != '' ? `${startTime}` : '']
      setcondition(conditionCopy)
    }} defaultValue={`${common.getBeforeDate(1)}`} disabledDate={disabledDate} />
</FormItem>

开始时间和结束时间关联日期带时分秒

<FormItem colSpan={5} label="时间筛选: ">
    <RangePicker hasClear format="YYYY-MM-DD" onChange={(val) => {
      const startTime = val[0] || ''
      const endTime = val[1] || ''
      const conditionCopy = common.changeJson(condition)
      conditionCopy.date = [startTime != '' ? `${common.getdate(startTime)}` : '', endTime != '' ? `${common.getdate(endTime)}` : '']
      setcondition(conditionCopy)
    }} showTime={{ format: 'HH:mm:ss', minuteStep: 15 }}
      defaultValue={[`${condition.date[0]}`, `${condition.date[1]}`]}
      disabledDate={disabledDate}
    />
</FormItem>