"typeable" ignores "format"

[c7pt7in]

"typeable" ignores "format" attribute and only works if I type date in format "MM.dd.yyyy"

Component use:

<datepicker v-model="date" :format="'dd.MM.yyyy'" :typeable="true"></datepicker>

1.5.1 and 1.5.2

[renatoosaka]

Same here

[charliekassel]

This is as designed.
If a user types something then it is left as is, as long as it parses to a Date object.
It doesn't really matter what is displayed in the input as the value will be the same - i.e. the Date object.

[tehnolog]

This is wrong.
If user type date in 'dd.MM.yyyy', 'MM.dd.yyyy', 'yyyy.MM.dd' etc, Date object should be different.
So It's impossible to type date in non-standard format.
Also values such as '25.05.1990' are clearing on blur.

[kennardconsulting]

+1

My users need to be able to type in 1/6/1980 to mean 1st June 1980. But the pop-up locks to 6th Jan 1980.

[barbosaalr]

Hello all, I just created pullRequest 633 to handle non-standard formats! Waiting to see if @charliekassel will accept it!

[ricardoinaciojunior]

The problem still persists on 02-01-2018

[triosw]

Problem still persists.
@charliekassel, if you cannot parse the date from format, can you please provide a prop for passing a parsing function?
e.g. props:{ ... dateStrParser: Function, ... } and if (this.dateStrParser){ this.currentDate = this.dateStrParser(inputStrVal, this.format); } (or take the current parsing function as default value for the prop).

If not possible:
@charliekassel can you ar least emit 'blur' event when the input loses focus, so we can catch it and apply our custom parsing function on the value of the input field?

(obviously prev tips were only my 2cents...)

[rpounder]

@charliekassel if it's by design, then it is bad design. Strictly from a UI perspective, if a user sees a date in a format, they won't try and type it a different way than what is displayed in most cases.

[atrujillofalcon]

No solution yet :(

[harlekoy]

Good news i created a fixed on this issue 😄#718

Format: dd MMM yyyy

Format: dd/MM/yyyy

[renielsalvador]

I am having problems with this too. Seems like the parsing mechanism that happens inside the components doesnt consider the format you provide. I.E if you set the format as dd-MM-yyyy and selects day 13+, it will return an invalid date and clears the calendar.

[MatheusMuriel]

I am having problems with this too. Seems like the parsing mechanism that happens inside the components doesnt consider the format you provide. I.E if you set the format as dd-MM-yyyy and selects day 13+, it will return an invalid date and clears the calendar.

I have this problem too
I think it's because the component switch days and months (so it goes up to 12)

[ConorSheehan1]

pr #653 would solve this! It delegates the parsing of dates, so you can pass a parser function, the same way you can pass a formatter function

[arthurbarbero]

The #653 does not solve this, this bug is not a formating problem, the typeable directive doesn't take the language directive nor the formating directive, it just keep accepting only the mm/dd/yyy format and conflict with all the component, Shame on you datepicker...

[ConorSheehan1]

@arthurbarbero You're right, the issue isn't about formatting, it's about parsing.
Specifically this line

vuejs-datepicker/src/components/DateInput.vue

Line 121 in de0fc75

const typedDate = Date.parse(this.input.value)

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse for reasons on why ambiguous dates such as 01/02/2020 are interpreted as mm/dd/yyyy. e.g.

new Date('10 06 2014');
will be treated as a local date of 6 October, 2014 and not 10 June, 2014.

#653 solves this parsing issue by providing a parse prop, which accepts a callback function, allowing you to parse user input any way you want! e.g. moment(userInput, 'DD/MM/YYYY')

I forked the datepicker, merged #653, ran the build script and committed the dist dir so I could npm install it directly from git, added a parse callback in my app, and voila. Working datepicker with typeable dd/mm/yyyy format.

[arthurbarbero]

The pr #653 will only solve the problem when it merge to the master, until then, Shame on you Vuejs-Datepicker.

[ConorSheehan1]

@arthurbarbero I don't think shame-driven development works. If you want #653 merged, you should upvote it.

Also you could change your downvote on my comment stating that #653 could solve this issue, now that I've also explained to you exactly how it could solve this issue.

[i-am-nikola]

Has this bug been fixed yet? This not true for me! I type in 1/6/2020 to mean 1st June 2020. But the pop-up locks to 6th Jan 2020.

[9xcoder]

still error with format "dd/MM/yyyy" :(

[sarunmrzn]

How is this still not fixed

[jotapixma]

2021 and still the fix date format, sad.

[atrujillofalcon]

2021 and still the fix date format, sad.

No other solution that migrate to other datepicker. https://github.com/mengxiong10/vue2-datepicker is good option.

[zawyehtutko]

2022 End of May, still not fixed yet.

[zawyehtutko]

problem is after i add props: typeable = "true", UI shows right, shown value and display format is right but after click to somewhere, it disappear.

[snakemastr]

2023 end of october, still not fixed.
Wasted hours implementing and styling only to find out a key feature makes this plugin unusable for me.