ant.design(简称antd)中时间DatePicker中RangePicker的日期选择限定为只能选择某一天的0点之前的日期

        需求:开始时间和结束时间只能选在一天之内,不能跨天选择。比如开始时间选择为2022年7月20日12点11分06秒,结束时间范围只能选择2022年7月20日12点11分06秒到2022年7月20日23点59分59秒。

        解答思路,开始选择的时分秒范围不做限制,当拿到开始的时分秒之后,在开始的时分秒基础上往后推即可,日期(年月日)就是选择开始和结束的日期(年月日)相同即可,主要是时分秒问题。

        下图是开始选择的图开始时间选择的如下:

ant.design(简称antd)中时间DatePicker中RangePicker的日期选择限定为只能选择某一天的0点之前的日期_第1张图片

        下图是结束时间可选择范围如下:

ant.design(简称antd)中时间DatePicker中RangePicker的日期选择限定为只能选择某一天的0点之前的日期_第2张图片

 标签代码如下:

        使用的前端技术为React的函数组件,disabledDate是自带控制时间日期的api,disabledTime是控制时分秒的api。


const [dates, setDates] = useState([null, null]);
 setDates(val)}
     disabledDate={disabledDate}
     disabledTime={disabledTimeRange}
     onChange={DatePickerChange}
     onOpenChange={() => setDates([null, null])}
     format="YYYY-MM-DD HH:mm:ss"
     showTime={{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }}
/>

           disabledDate={disabledDate}中括号里的是函数对应代码如下

代码注释如下:

1、禁用可选日期

2、判断选择日期不为空

3、判断选择了开始日期,结束日期没选的时候触发

4、结束时间只能选择和开始时间相同的年月日

5、开始时间没有选择的时候

6、限定只能选择当前日期之后的年月日,包括今天

// 禁用可选日期
  const disabledDate = (current) => {
    //判断选择日期不为空
    if (dates) {
       //判断选择了开始日期,结束日期没选的时候触发
      if (dates[0] !== null && dates[1] === null) {
         //结束时间只能选择和开始时间相同的年月日
        return current && moment(current).format('YYYY/MM/DD') != moment(dates[0]).format('YYYY/MM/DD');
       //开始时间没有选择的时候
      } else if (!dates[0]) {
        //限定只能选择当前日期之后的年月日,包括今天
        return current && current < moment().subtract(1, 'days').endOf('day');
      }
    }

  };

        disabledTime={disabledTimeRange}中括号里的是函数对应代码如下:

代码注释如下:

1、禁止选择的时间

2、当前选择结束时分秒时

3、选择了开始日期时触发 

4、dates[0]是选择的开始时间,拿到开始时间的时分秒,在开始的时分秒上,进行限制。

// 禁止选择的时间
  const disabledTimeRange = (_, type) => {
    //当前选择结束时分秒时
    if (type === 'end') {
      //选择了开始日期时触发 
      if (dates) {
        //dates[0]是选择的开始时间,拿到开始时间的时分秒,在开始的时分秒上,进行限制。
        let flagTime = moment(dates[0]).format('YYYY/MM/DD HH:mm:ss');
        let houers = flagTime.split(' ')[1].split(':')[0];
        let Minutes = flagTime.split(' ')[1].split(':')[1];
        let Seconds = flagTime.split(' ')[1].split(':')[2];
        let endflagTime = moment(_).format('YYYY/MM/DD HH:mm:ss');
        let houersEnd = endflagTime.split(' ')[1].split(':')[0];
        let MinuteEnd = endflagTime.split(' ')[1].split(':')[1];
        let SecondEnd = endflagTime.split(' ')[1].split(':')[2];
        return {
          disabledHours: () => range(0, houers),
          disabledMinutes: () => {
            if (houersEnd > houers) {
              return [0, 60];
            } else {
              return range(0, Minutes);
            }
          },
          disabledSeconds: () => {
            if (MinuteEnd > Minutes || houersEnd > houers) {
              return [0, 60];
            } else {
              return range(0, Seconds);
            }
          },
        };
      }
    }
  };

你可能感兴趣的:(React,html5,javascript,react.js,css,html)