使用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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）