小编Dev*_*Dev的帖子

我还需要从反应日期选择器中选择秒。我浏览过文档发现了这个

在此解决方案中，我可以从中选择小时、分钟、上午/下午，但没有秒选项是否有任何方法可以自定义也从中选择秒。需要帮助，如下示例（查找输入时间）

我尝试过更改日期格式

dateFormat="MM/dd/yyyy h:mm:ss aa" 不起作用

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      showTimeInput
    />
  );
};

我找到了显示秒数的方法，但这工作正常，但在我们选择时间后整个对话框正在关闭的模型内。我在 MaterialUi 对话框中使用它

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomTimeInput = ({ value, onChange }) => (
    <input
      type="time"
      step="1"
      value={value}
      onChange={e => onChange(e.target.value)}
      style={{ border: "solid 1px pink" }}
    />
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />
  ); …

我需要使用 formik 或 yup 验证动态创建的字段。我在这里看到了 jquery validatioh 中完成的验证

对此

我的代码在这里 https://codesandbox.io/s/hidden-haze-47k73?file=/src/demo.js

我如何使用 formik 和 yup 来实现这一点

嗨，我又来了，是的，我有疑问

我需要使用 Yup 验证 Fromik 字段数组 我的字段就像

[{startdate:'',endDate:'',name:''},{startdate:'',endDate:'',name:''}]

开始/结束日期是日期对象在使用 Yup 和 formik 之前，我正在进行验证以检查所选日期是否已经退出，如下所示

 const checkDate=(selectedDate)=>{
    const isExisting = datas
      .filter((data) => data.startDate !== null || data.endDate !== null)
      .some(
        (data) =>
          new Date(data.startDate).toLocaleDateString() === selectedDate ||
          new Date(data.endDate).toLocaleDateString() === selectedDate,
      );

    if (isExisting) {
      toast.error('Date already exits');
      return false;
    }
}

我知道这有点奇怪。你们中的一些人可能对此有更好的选择。我像这样手动进行所有表单验证，在使用 formik 和 Yup 之后帮助了很多。

说到这里，如果用户选择了任何日期，我需要验证日期，验证所选日期是否存在或不在数组中。它的 formik 字段数组 我的验证模式就像

export const CheckoutSchema = Yup.object().shape({
  Checkout: Yup.array()
    .of(
      Yup.object().shape({
        name: Yup.string().required(),
        startDate: Yup.date().required(),
        endDate: Yup.date().required(),
      }),
    )
});

我已经检查了一些 …