ant design 月份选择 不能大于本月,选择范围24个月

使用ant design的时间组件 #MonthPicker日期选择框# 需求是要起始时间和结束时间最多范围是24个月,结束时间不能超过当月。

import React , {useEffect, useState } from 'react';
import {DatePicker} from 'antd';
const moment = require('moment');
const { MonthPicker } = DatePicker;

const DateChoose= (props:IProps)=>{
    const [startMonth,setStartMonth] = useState(moment().subtract(1, 'month'));
  const [endMonth,setEndMonth] = useState(moment());  // 结束日期默认是当月

    useEffect(()=>{ // 筛选条件改变 触发请求
      console.log('getTableData')
     },[endValue,startValue])
    
   // 按月 - 时间组件 startMonth
  const disabledStartMonth = (startVal) => {
    if (!startVal || !endMonth) {
      // 如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
      return startVal.valueOf() > moment().endOf('day');// 禁止选择本月以后月份
    }
    // 如果选择了结束日期,则结束日期和开始日期之差不能大于24个月,还需要开始日期小于结束日期,返回true,禁止选择
    const minus = endMonth.clone().subtract(24, "months");
    return startVal.valueOf() < minus.valueOf() || endMonth.valueOf() <= startVal.valueOf();
  }

  // 按月 - 时间组件 endMonth
  const disabledEndMonth = (endVal) => {
    if (!endVal || !startMonth) {
      // 如果没有选择开始日期,则结束日期时大于今天
      return endVal.valueOf() > moment().endOf('day');// 大于今天的日期一律返回true,禁止选择
    }
    // 如果选择了开始日期,则结束日期和开始日期之差不能大于24个月之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回true为不能选择
    const minus = startMonth.clone().add(24, "months");
    return endVal.valueOf() <= startMonth.valueOf() || endVal.valueOf() > moment().endOf('day') || endVal.valueOf() > minus.valueOf();
  }

  // 按月 - 时间组件 选中开始时间后赋值
  const changeStartMonth = value => {
    setStartMonth(value);
  };

  // 按月 - 时间组件 选中开始时间后赋值
  const changeEndMonth = value => {
    setEndMonth(value);
  };

return (
     <div>
               <MonthPicker
        disabledDate={disabledStartMonth}
        onChange={changeStartMonth}
        value={startMonth}
        placeholder="请选择开始月份" />
      <span className={styles.lines}>~</span>
      <MonthPicker
        disabledDate={disabledEndMonth}
        onChange={changeEndMonth}
        value={endMonth}
        placeholder="请选择结束月份" />
   </div>
)
}

export default DateChoose;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容