I am using Flatpickr v4.6.3. Using following line of code to initialize it on text fields with class date.

$( ".date" ).flatpickr({"dateFormat":"d-M-Y",disableMobile: "true","defaultDate":new Date()});

Here, I want Flatpickr to show the date that is set in value of input field, and if textbox/input field value is not having a valid date the show default date.

Problem : if I use defaultDate:new Date(), then it always overrides whatever date value is set on input field. Maybe I can write a method to invoke for defaultDate and parse input value myself and return accordingly. Please suggest.

I am using Flatpickr v4.6.3. Using following line of code to initialize it on text fields with class date.

$( ".date" ).flatpickr({"dateFormat":"d-M-Y",disableMobile: "true","defaultDate":new Date()});

Here, I want Flatpickr to show the date that is set in value of input field, and if textbox/input field value is not having a valid date the show default date.

Problem : if I use defaultDate:new Date(), then it always overrides whatever date value is set on input field. Maybe I can write a method to invoke for defaultDate and parse input value myself and return accordingly. Please suggest.

• javascript
• flatpickr

1 Answer 1

I had this same issue. The 'defaultDate' property is of type string and the default value is null. Remember its a string so if you use 'null' it initializes to blank. I'm using 4.6.1 and this works for me.

$( ".date" ).flatpickr({
   dateFormat:"d-M-Y",
   disableMobile: "true",
   defaultDate:'null'
});