React-datepicker: Date format not supporting 'DD-MM-YYYY'

[syam1123]

I was trying to set format to 'DD/MM/YYYY' or 'DD-MM-YYYY'
I've checked the demo site also
Nowhere in the demo it's showing the format of 'DD/MM/YYYY'

When I'm giving format 'DD/MM/YYYY', it's automatically changing to 'MM/DD/YYYY' and suppose if I'm selected '23/05/2016', it's changing to '05/23/2016' and suddenly to 'Invalid date'.

Here is the code

<DatePicker {...input} dateFormat="DD/MM/YYYY" className="form-control" fixedHeight selected={selectedDate} isClearable={true} showYearDropdown />

[jochenberger]

I cannot reproduce this with 0.34.0: http://codepen.io/jochenberger/pen/xRzRMP

[martijnrusschen]

Looks like this is fixed

[reznord]

@martijnrusschen I am still getting the same issue with the latest version as well.

Package versions:

react: 15.4.1
react-datepicker: 0.37.0

[jochenberger]

@reznord have a look at http://codepen.io/jochenberger/pen/xRzRMP, it uses react 15.4.1, react-datepicker 0.37.0, and the MM/DD/YYYY format. It works fine. What are you doing differently? Can you modify the codepen to reproduce the issue?

[jonnetanninen]

I have the same issue while using react-datepicker inside redux-form. The issue doesn't happen when first selecting the date, but only onBlur.

react: 15.1.0
react-datepicker: 0.39.0

Here's my wrapper component to make the DatePicker work with redux-form's Field component:

const CustomizedDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
  <div>
     <DatePicker {...input} dateFormat="DD/MM/YYYY" selected={input.value ? moment(input.value) : null} />
    {touched && error && <span>{error}</span>}
  </div>
);

And here I pass it to the Field component:

<Field name="startDate" component={CustomizedDatePicker} />

[STEVEOO6]

Just wanted to flag that to use a dateFormat format that differs from the format i'm using to store the value (in redux state), i needed to override the onBlur property to ignore it's input parameter, as per http://redux-form.com/6.4.3/examples/react-widgets/.

For example (in my state I store the date in YYYY-MM-DD format but I want it displayed to the user in DD/MM/YYYY format):

const FilterDeliveryDateField = field => (
    <div>
        <FilterDeliveryDate {...field.input} onBlur={() => field.input.onBlur()} />
        {field.meta.touched && field.meta.error && 
        <span className="error">{field.meta.error}</span>}
    </div>
)

AND

const parseStateToValue = state => moment(state, 'YYYY-MM-DD')
const formatValueToState = value => value.format('YYYY-MM-DD')

const FilterDeliveryDate = ({name, value, onChange, ...props}) => (
    <DatePicker
        name={name}
        className="form-control"
        dateFormat="DD/MM/YYYY"
        selected={parseStateToValue(value)}
        onChange={value => onChange(formatValueToState(value))}
        {...props}
        minDate={props.minDate || moment()}
        />
)

[tata81]

This issue still exists in the latest version of ^2.2.0 too.
Please refer https://codesandbox.io/s/nnr08opmvp
In the latest there is no need of using monent.js

[tata81]

This issue still exists in the latest version of ^2.2.0 too.
Please refer https://codesandbox.io/s/nnr08opmvp
In the latest there is no need of using monent.js

Update:- Seems like there is case issue with DD-MM-YYYY, try using dd-MM-yyyy

[tolgaduzenli]

for me dd/MM/yyyy . works fine.

[andy-leighton]

I have tested with dd/MM/yyyy and it works fine.

With a format of dd MMM yyyyy however - what should happen if a user types in 05/01/2019 or (even 05 01 2019). At the moment this is parsed as MDY - so we end up with the 1st May. Which is counter-intuitive to people in the DMY part of the world who habitually type dd/MM/yyyy.

Having dug through the code I see that the dateFormat prop can take an array of formats which it will try when parsing. So dateFormat={['dd MMM yyyy', 'dd/MM/yyyy', 'dd MM yyyy']} which works for me. I don't think this is documented anywhere (I can't see an example for it). So maybe adding an example will help others.

[prakash11019]

need solution still nopt working

[prakash11019]

className="form-control1"
onChange={this.onChangeDate}
value={this.state.date}
onSelect={this.onChangeDate} //when day is clicked
maxDate={new Date()}
placeholderText="DD/MM/YYYY"
// dateFormat="dd - mm - yyyy"
dateFormat="dd/MM/yyyy"
readOnly={this.state.readonlyInput}
/>
this is my code

[barbalex]

@andy-leighton
you are my today's hero: this is a great find and helps us _a lot_
Such an awesome feature - and not documented?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.