ant. The date selection of rangepicker in time datepicker in design (antd for short) is limited to the date before 0 o'clock of a certain day

        demand ： The start time and end time can only be selected within one day , Cannot select across days . For example, the start time is 2022 year 7 month 20 Japan 12 spot 11 branch 06 second , The end time range can only be selected 2022 year 7 month 20 Japan 12 spot 11 branch 06 Seconds to 2022 year 7 month 20 Japan 23 spot 59 branch 59 second .

        Solutions , Start selected Minutes and seconds The scope is not limited , When you get the start Minutes and seconds after , Push back on the basis of the starting time, minutes and seconds , date （ Specific date ） Is to choose the start and end dates （ Specific date ） The same can be , Mainly Minutes and seconds problem .

        The following figure shows the start time selection chart ：

        The following figure shows the end time. The optional range is as follows ：

  Label codes are as follows ：

        The front-end technology used is React The function component of ,disabledDate It has its own control time and date api,disabledTime It controls time, minutes and seconds 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} The corresponding code of the function in brackets is as follows

The code comments are as follows ：

1、 Disable optional dates

2、 Judge that the selected date is not empty

3、 Judge whether the start date is selected , Triggered when the end date is not selected

4、 The end time can only be the same as the start time

5、 When there is no choice of starting time

6、 You can only select the date after the current date , Including today

//  Disable optional dates 
  const disabledDate = (current) => {
    // Judge that the selected date is not empty 
    if (dates) {
       // Judge whether the start date is selected , Triggered when the end date is not selected 
      if (dates[0] !== null && dates[1] === null) {
         // The end time can only be the same as the start time 
        return current && moment(current).format('YYYY/MM/DD') != moment(dates[0]).format('YYYY/MM/DD');
       // When there is no choice of starting time 
      } else if (!dates[0]) {
        // You can only select the date after the current date , Including today 
        return current && current < moment().subtract(1, 'days').endOf('day');
      }
    }

  };

        disabledTime={disabledTimeRange} The corresponding code of the function in brackets is as follows ：

The code comments are as follows ：

1、 Forbidden time

2、 The current selection ends in minutes and seconds

3、 Trigger when start date is selected  

4、dates[0] Is the selected start time , Get the hour, minute and second of the start time , At the beginning of the minute , Limit .

//  Forbidden time 
  const disabledTimeRange = (_, type) => {
     // The current selection ends in minutes and seconds 
    if (type === 'end') {
      // Trigger when start date is selected  
     if (dates) {
         //dates[0] Is the selected start time , Get the hour, minute and second of the start time , At the beginning of the minute , Limit .
        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];
        return {
          disabledHours: () => range(0, houers),
          disabledMinutes: () => range(0, Minutes),
          disabledSeconds: () => range(0, Seconds),
        };
      }
    }
  };