Установить значение по умолчанию для RangePicker с формой в Ant-Design

Question

У меня есть приложение, которое может получить данные из внешнего интерфейса и сохранить их в состоянии.

Для некоторых входов я устанавливаю значение по умолчанию, используя:

  form.setFieldsValue({
    note: text.note,
    gender: text.gender
  });

, но я также хочу установить значение по умолчанию для RangePicker. У меня есть данные, которые должны быть в состоянии по умолчанию:

  useEffect(() => {
    setText({
      note: "2",
      gender: "demo",
      start: "2020-03-09 13:00", //set as default value for Range Picker
      end: "2020-03-27 13:17" //set as default value for Range Picker
    });
  }, []);

Как точно установить значение по умолчанию для Range Picker, используя form.setFieldsValue? ссылка на мой код: https://codesandbox.io/s/form-methods-ant-design-demo-hzgg7

Answer 1

Ant Design RangePicker API

Реквизиты значение и defaultValue оба имеют тип:

[момент, момент]

Поэтому установите значение по умолчанию, как показано ниже:

Picker: [moment("2020-03-09 13:00"), moment("2020-03-27 13:17")]

Полный код: (Picker с заглавной первой буквой, лучше изменить это)

useEffect(() => {
  setText({
    note: "2",
    gender: "demo",
    Picker: [moment("2020-03-09 13:00"), moment("2020-03-27 13:17")]
  });
}, []);

form.setFieldsValue({
  note: text.note,
  gender: text.gender,
  Picker: text.Picker
});

<Form.Item name="Picker" label="date"> // the name here is `Picker` from your code
  <RangePicker
    showTime={{ format: "HH:mm" }}
    format="YYYY-MM-DD HH:mm"
    onChange={onChange2}
  />
</Form.Item>