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）函数中，我得到两个时刻的对象。但是当我发布数据时，它们会转换为具有以下格式的字符串：

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

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

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

Answer 1

根据RangePicker此处https://ant.design/components/date-picker/#RangePicker的antd文档，道具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对象值？

1 个答案: