瞬间不断提出验证表格

发布于 2025-01-28 02:45:53 字数 1569 浏览 3 评论 0原文

我正在处理一个日期选择器,并且看起来很简单,无论如何,验证可以使返回时刻对象。我将直接跳到代码:

const DATE_VALIDATION_RULE = {
  validator(_, value) {

    console.log(value, "Here"); // This keeps returning the moment object

    if (!value) {
      return Promise.resolve();
    }
    if (!isDefined(parseDate(value))) {
      return Promise.reject(new Error('Must be valid date of form DD/MM/YYYY'));
    }
    return Promise.resolve();
  },
};

export interface DateInputFormItemProps {
  value?: (string | undefined);
  label?: string;
  name: string | (string | number)[];
  onChange?: (value: (string)) => void;
  rules?: Rule[];
  dependencies?: (string | (string | number)[])[];
  disabled?: boolean;
}

export const DateInputFormItem = ({
  value,
  label,
  name,
  onChange,
  rules = [],
  dependencies,
  disabled,
}: DateInputFormItemProps) => {
  const [date, setDate] = useState<string | undefined>(value);

  const dateFormat = 'DD/MM/YYYY';

  useEffect(() => {
    setDate(value);
  }, [value]);

  const handleOnChange = (value, dateString) => {
    setDate(dateString);
    console.log('Formatted Selected Time: ', dateString, date);
    onChange?.(dateString);

  }

  return (
    <Form.Item
      label={label}
      name={name}
      rules={[DATE_VALIDATION_RULE, ...rules]}
      dependencies={dependencies}
    >
      <DatePicker
        format={dateFormat}
        onChange={handleOnChange}
        disabled={disabled}
      />
    </Form.Item>
  );
};

我最近做了一个范围选择器,该范围的代码完全相同,但是在范围内,验证的日期按预期获得,但是该日期不断返回时刻对象。谢谢

I am working on a date picker and as simple as it seems, the validation keeps return the moment object regardless. I'll jump straight to the code:

const DATE_VALIDATION_RULE = {
  validator(_, value) {

    console.log(value, "Here"); // This keeps returning the moment object

    if (!value) {
      return Promise.resolve();
    }
    if (!isDefined(parseDate(value))) {
      return Promise.reject(new Error('Must be valid date of form DD/MM/YYYY'));
    }
    return Promise.resolve();
  },
};

export interface DateInputFormItemProps {
  value?: (string | undefined);
  label?: string;
  name: string | (string | number)[];
  onChange?: (value: (string)) => void;
  rules?: Rule[];
  dependencies?: (string | (string | number)[])[];
  disabled?: boolean;
}

export const DateInputFormItem = ({
  value,
  label,
  name,
  onChange,
  rules = [],
  dependencies,
  disabled,
}: DateInputFormItemProps) => {
  const [date, setDate] = useState<string | undefined>(value);

  const dateFormat = 'DD/MM/YYYY';

  useEffect(() => {
    setDate(value);
  }, [value]);

  const handleOnChange = (value, dateString) => {
    setDate(dateString);
    console.log('Formatted Selected Time: ', dateString, date);
    onChange?.(dateString);

  }

  return (
    <Form.Item
      label={label}
      name={name}
      rules={[DATE_VALIDATION_RULE, ...rules]}
      dependencies={dependencies}
    >
      <DatePicker
        format={dateFormat}
        onChange={handleOnChange}
        disabled={disabled}
      />
    </Form.Item>
  );
};

I recently did a range picker, which has exactly the same code, but in the range case, the validation gets the dates as expected, but this one keeps returning the moment object. Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文