使用react-datepicker和格式库排除时间

如何解决使用react-datepicker和格式库排除时间

当我在第一个字段中经过一个小时时，我正在尝试在网站上添加触发器，第二个字段必须不允许用户在第一个字段中的小时之前添加一个小时，并且不能这样做使用onChange的原因是因为我使用的是非格式库，因此必须将datepicker输入分离到一个单独的组件中。

有人可以帮助我吗？

第一个代码是我的函数，它从第二个字段中排除了过去的时间

const handleGetPastTimes = useCallback(() => {
    try {
      const formData = formRef.current?.getData() as FormProps;
      const allHours = Array.from({ length: 24 },(_,hour) => {
        const currentDate = new Date();
        currentDate.setHours(hour);
        currentDate.setMinutes(0);
        currentDate.setSeconds(0);
        return currentDate;
      });

      const excludeTimes = formData.schedule.map((scheduleItem) => {
        return allHours.filter((hour) => isBefore(hour,scheduleItem.from));
      });

      setPastTimes(excludeTimes);
    } catch (err) {
      console.error('ERRo');
    }
},[]);

第二个代码是带有格式不正确的库的datepicker组件

import React,{ useRef,useState,useEffect } from 'react';
import ReactDatePicker,{ ReactDatePickerProps } from 'react-datepicker';
import { useField } from '@unform/core';
import 'react-datepicker/dist/react-datepicker.css';

import { Container,DatePickerContainer } from './styles';

interface Props extends Omit<ReactDatePickerProps,'onChange'> {
  name: string;
  label?: string;
}
const DatePicker: React.FC<Props> = ({ name,label,...rest }) => {
  const datepickerRef = useRef(null);
  const { fieldName,registerField,defaultValue } = useField(name);
  const [date,setDate] = useState(defaultValue || null);

  useEffect(() => {
    registerField({
      name: fieldName,ref: datepickerRef.current,path: 'props.selected',clearValue: (ref: any) => {
        ref.clear();
      },});
  },[fieldName,registerField]);
  return (
    <Container>
      <label htmlFor="">{label}</label>
      <DatePickerContainer>
        <ReactDatePicker
          ref={datepickerRef}
          selected={date}
          onChange={setDate}
          {...rest}
        />
      </DatePickerContainer>
    </Container>
  );
};
export default DatePicker;