react限制日期范围为选中时间前后3个月

基于react的日期控制插件头部引用功能函数插件使用最终结果头部引用使用react的useState，通过记录state状态的变量来判定日期当前值。import React,{ useState }from 'react';const { RangePicker } = DatePicker;const [selectDate, setSelectDate] = useState(null);功能

yano_sd

1473人浏览 · 2020-08-11 16:54:09

yano_sd · 2020-08-11 16:54:09 发布

基于react的日期控制插件

头部引用

使用react的useState，通过记录state状态的变量来判定日期当前值。

  import React,{ useState }  from 'react';
  const { RangePicker } = DatePicker;
  const [selectDate, setSelectDate] = useState(null);

功能函数

  //日期限制
  const disabledDate = (current) =>{
    if (!current || !selectDate){
      return false
    }
    let selectV = moment(selectDate.valueOf()).format('YYYY-MM-DD HH:mm:ss');
    return current < moment(selectV).subtract(3, 'months') || current > moment(selectV).add(3,'month') || current > moment().endOf('day')
  };
  const onCalendarChange = (dates) =>{
    if (!dates || !dates.length)  {
      return
    }
    setSelectDate(dates[0])
  };
  const onDateOpenChange = ()=>{
    setSelectDate(null);
  }

插件使用

  <RangePicker
    showTime
    ranges={{
      近1天: [
        moment(
          moment()
            .subtract(1, 'days')
            .format('YYYY-MM-DD 18:00:00'),
        ),
        moment(moment().format('YYYY-MM-DD 18:00:00')),
      ],
      近3天: [moment().subtract(3, 'days'), moment()],
      近6天: [moment().subtract(6, 'days'), moment()],
      // 20190701: [moment('2019-07-01 00:00:00'), moment('2019-07-01 23:59:59')]
    }}

    disabledDate={disabledDate}
    onCalendarChange={onCalendarChange}
    onOpenChange={onDateOpenChange}
    style={{ width: 430 }}
    className={style.rangePicker}
    format="YYYY-MM-DD HH:mm:ss"
    placeholder={['开始时间', '结束时间']}
    defaultValue={[
      moment(
        moment()
          .subtract(1, 'days')
          .format('YYYY-MM-DD 18:00:00'),
      ),
      moment(moment().format('YYYY-MM-DD 18:00:00')),
    ]}
    onChange={changeTime.bind(this, 'days')}
  />