CODEWITHSUNDEEP
reactjsmomentjsantd
Wasif
Wasif

Reputation: 213

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

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

Upvotes: 0

Views: 21638

Answers (5)

Cristian Salerno
Cristian Salerno

Reputation: 11

instead

initialValue: moment(null)

pass

initialValue: undefined.

works for me,

Upvotes: 1

Sanan Ali
Sanan Ali

Reputation: 3436

This worked for me.

<DatePicker
        
        placeholder="Date"
        format={DATE_FORMAT}
        defaultValue={
          (data?.openHouse?.date && moment(data.openHouse?.date, 'YYYY-MM-DD')) || ''
        }
        onChange={(momentDate: any) => {
          setValue('openHouse.date', momentDate?.format('YYYY-MM-DD'), {
            shouldValidate: true,
          });
        }}
        
      />

Upvotes: 1

Muhammad Ali
Muhammad Ali

Reputation: 339

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>

Upvotes: 3

Joshua Oluikpe
Joshua Oluikpe

Reputation: 608

const getDateFormat = date => {
    var d = moment(date);
    return date && d.isValid() ? d : '';
  };

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

Upvotes: 0

Sanaullah
Sanaullah

Reputation: 374

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'),
);

Upvotes: 1

Related Questions