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

原创已于 2022-07-21 10:58:12 修改 · 4.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #react.js #css #html

于 2022-07-20 22:20:51 首次发布

React 专栏收录该内容

2 篇文章

订阅专栏

该博客讨论了如何在React应用中使用RangePicker组件，确保开始和结束时间在同一日期内，不能跨天选择。通过disabledDate和disabledTime API来实现这一功能，详细解释了相关代码逻辑，包括禁用特定日期和时分秒的选择，以及根据已选开始时间限制结束时间的范围。

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

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

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

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

标签代码如下：

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


const [dates, setDates] = useState([null, null]);
<RangePicker
     onCalendarChange={(val) => 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);
            }
          },
        };
      }
    }
  };