React中如何保存和加载保存的Antd DatePicker对象值？

Question

我正在使用 Antd 库创建一个 React 应用程序。我有表单项：

<FormItem {...formItemLayout} label="Validity Period">
      {getFieldDecorator('validityPeriod', {
          // initialValue: this.state.recordToBeEdited.validityPeriod,
          rules: [{ type: 'array', required: false }],
       })(
              <RangePicker
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
                placeholder={['Start Time', 'End Time']}
                onChange={console.log("Ok Changed")}
                style={{ width: '100%' }}
                onOk={console.log("Ok Clicked")}
              />
        )}
</FormItem>

在 HandleSubmit(e) 函数中，我得到了两个 moment 对象。但是当我 POST 数据时，它们会转换为具有以下格式的字符串：

"validityPeriod":["2018-01-11T12:32:26.551Z","2018-02-19T12:32:26.551Z"]

问题是，当我尝试使用我在其他组件中收到的 json 设置范围选择器的初始值时，我得到错误默认值不符合要求的格式。

如何使传入的时间字符串数组成为antd rangepicker接受的格式？

Answer 1

根据此处 RangePicker 的 antd 文档 https://ant.design/components/date-picker/#RangePicker，道具类型 defaultValue 是 [moment, moment]。
所以你可以这样做：

<RangePicker 
  defaultValue={
    [ moment('2018-01-11T12:32:26.551Z'), 
      moment('2018-02-19T12:32:26.551Z') ]
  }
/>

文档中的示例可以在这里看到：https://ant.design/components/date-picker/#When-To-Use
希望这能解决您的问题！

React中如何保存和加载保存的Antd DatePicker对象值？

How to save and load the saved Antd DatePicker object value in React?

momentjs

reactjs

antd