Antd Date : how to set valid empty date in moment js

0
votes

I am using ANTD (https://ant.design/) for the project, ANTD is working fine with other components whereas I am facing issue while using DatePicker(https://ant.design/components/date-picker/). DatePicker uses moment(https://momentjs.com/)

In a form initially, I want all the fields with a placeholder and once the user fills the form it will be displayed to him/her. Once added user can edit their data.

Setting data works fine but I am unable to set date field initially as empty so that I am able to show the user a field with a placeholder

I am setting the date field as

initialValue: moment(null) => invalid date
initialValue: moment('') => invalid date
initialValue: moment(undefined) => current date // i don't want current date i want empty (to show the placeholder instead)

where as when i am getting user selected while setting the date it works perfectly fine.

 initialValue: moment(userSelectedDate) =>  user selected date
3
reactjsmomentjsantd
Have you tried not providing the initialValue prop? – Thanh Le Hai Hoang
I am using initialValue prop for setting the data , if I removed that then it works fine but then I am unable to set the user date while showing the form for edit @ghostbbbmt-MSP – Wasif
If you want to not set the initial value, does not provide the initialValue prop – Thanh Le Hai Hoang
I am handling the initial form and edit form in the same form if I don't use initialValue prop then I won't be able to set the data while showing the using edit form – Wasif
@Wasif you can use state like selectedDate and set initialValue = this.state.selectedDate. Try to set the init value of selectedDate is undefined – Thanh Le Hai Hoang

3 Answers

2
votes

This worked for me.

              <Space direction="horizontal">
            <DatePicker
              value={formik.values.next_reminder_date
                ? moment(formik.values.next_reminder_date) : undefined}
              placeholder="Next Reminder Date"
              name="next_reminder_date"
              onChange={(date) => {
                const isoDate = date?.toISOString();
                formik.setFieldValue('next_reminder_date', isoDate);
              }}
            />
          </Space>
1
votes

Make an initial value in state as undefined and assign an initial value to defaultValue prop of datepicker. Try the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { DatePicker } from 'antd';

const dateFormat = 'YYYY/MM/DD';
const initialValue=undefined; // this initial value should be in state

ReactDOM.render(
  <div>
    <Form.Item >
      {getFieldDecorator('password', {
        rules: [{ required: true, message: 'Please input your Password!' }],
        initialValue:initialValue
      })(
        <DatePicker
      placeholder="please add date"
     format={dateFormat}
/>
      )}
    </Form.Item>

    <br />

  </div>,
  document.getElementById('container'),
);
0
votes
const getDateFormat = date => {
    var d = moment(date);
    return date && d.isValid() ? d : '';
  };

In your input tag value={getDateFormat(value)}