Antd datepicker（date.clone不是函数）

Question

我有一个 React 应用程序。有一个禁用日期选择器的复选框。但是当我使用复选框禁用它时，我不能 select 任何日期。如果我删除复选框及其功能，则不会出现错误。我有 date.clone 不是函数错误。有谁可以帮助我吗？谢谢

const dateFormat = "YYYY-MM-DD";
const today = moment();

const [date, setDate] = useState(today);
const [disabled, setdisabled] = useState(false);



const onCheckboxHandle = (e) => {
    if (e.target.checked) {
      setwarntill(moment("2090-10-10"));
      setdisabled(true);
    } else {
      setwarntill(today);
      setdisabled(false);
    }
  };

<Checkbox onChange={onCheckboxHandle}>Süresiz</Checkbox>
        <Form.Item name={["user", "timetill"]} label="Uyarı Bitiş Tarihi">
          <ConfigProvider locale={locale}>
            <DatePicker
              defaultValue={moment()}
              format={dateFormat}
              onChange={(date,dateString) => setwarntill(dateString)}
              value={warntill}
              disabled={disabled}
            />
          </ConfigProvider>
        </Form.Item>

Answer 1

我发现使用里面的会报'date.clone is not a function'错误。所以你可以把放在外面它应该工作。

您的代码应如下所示：

const dateFormat = "YYYY-MM-DD";
const today = moment();

const [date, setDate] = useState(today);
const [disabled, setdisabled] = useState(false);



const onCheckboxHandle = (e) => {
    if (e.target.checked) {
      setwarntill(moment("2090-10-10"));
      setdisabled(true);
    } else {
      setwarntill(today);
      setdisabled(false);
    }
  };

<Checkbox onChange={onCheckboxHandle}>Süresiz</Checkbox>
       <ConfigProvider locale={locale}>
            <DatePicker
              defaultValue={moment()}
              format={dateFormat}
              onChange={(date,dateString) => setwarntill(dateString)}
              value={warntill}
              disabled={disabled}
            />
          </ConfigProvider>

Answer 2

我遇到了同样的问题，这与Form.Item

无关

我有 Form.Item

我通过以下方式解决了这个问题：

在页面加载时初始化表单值
当你初始化时，请记住，antD 默认语言环境是美国，因此，你需要将你的时刻或字符串转换为 MM/DD/YYYY

那么这就解决了我的问题

Answer 3

这将解决您的问题。

Use defaultValue={moment(moment(), dateFormat)}

Answer 4

借助 moment 解析日期对我有用 moment(myDate)

Answer 5

将 DatePicker 组件放在之外并检查它是否正常工作。

         <DatePicker
            format={"YYYY-MM-DD"}
            onChange={(date, dateString) =>
              this.handleDatepickerChange(date, dateString)
            }
            placeholder="Start Date"
            value={
              this.state.startDate !== ""
                ? moment(this.state.startDate)
                : ""
            }
          />

Answer 6

试试这个，这对我有用

const today = moment(new Date().getDate(),'DD/MM/YYYY')

Answer 7

给出 isNull 的三元条件然后它就可以工作.... 像

date_added: _.isNull(date_added) ? null : moment(date_added);

Answer 8

该值需要一个 moment.js 实例。您应该将 onChange 函数更改为此 onChange={(date,dateString) => setwarntill(date)}。当 post 到服务器时，您应该使用 moment format 函数来获取服务器需要的格式。

Answer 9

我在 <Form> 的 initialValues 中尝试将保存为字符串类型的数据用于 DatePicker 时遇到了类似的问题（date.clone 不是函数）。通过传递给初始值而不是字符串来解决它，而是传递给 DatePicker 的时刻对象：

  const dateFormat = 'YYYY-MM-DD';
  const selectedStartDate = moment('2000-11-11', dateFormat);
  const selectedEndDate = moment('2000-12-11', dateFormat);

  const initValues = {
    startDate: selectedStartDate,
    endDate: selectedEndDate,
  };

  <Form form={form}
        name="basic"
        initialValues={initValues}>
    
    <Form.Item label={'Start'} name={'startDate'}>
      <DatePicker value={selectedStartDate}/>
    </Form.Item>

    <Form.Item label={'End'} name={'endDate'}>
      <DatePicker value={selectedEndDate}/>
    </Form.Item>

  </Form>

Antd datepicker（date.clone不是函数）

Antd datepicker (date.clone is not a function)

momentjs

reactjs

antd

react-hooks