CODEWITHSUNDEEP
reactjsmomentjsantd
DadyByte
DadyByte

Reputation: 914

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

I am creating a react app using Antd library. I have form item:

<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>

In the HandleSubmit(e) function I am getting two moment Objects. But when I POST the data they get converted into strings with the following format:

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

The Problem is when I am trying to set the initial value of the range picker using the json which I receive in other components I get the error default value is not in the required format.

What can I do to make the incoming array of time strings to the format which antd rangepicker accepts?

Upvotes: 1

Views: 14187

Answers (1)

Swapnil
Swapnil

Reputation: 816

As per the antd documentation for RangePicker here https://ant.design/components/date-picker/#RangePicker, type of prop defaultValue is [moment, moment].
So you can do something like: 

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

Example in documentation can be seen here: https://ant.design/components/date-picker/#When-To-Use
Hope this solves your problem!

Upvotes: 4

Related Questions