vuejs-datepicker icon indicating copy to clipboard operation
vuejs-datepicker copied to clipboard

"typeable" ignores "format"

Open c7pt7in opened this issue 7 years ago • 25 comments

"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

c7pt7in avatar Aug 23 '18 13:08 c7pt7in

Same here

renatoosaka avatar Sep 21 '18 18:09 renatoosaka

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.

charliekassel avatar Sep 22 '18 07:09 charliekassel

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.

tehnolog avatar Oct 22 '18 13:10 tehnolog

+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.

kennardconsulting avatar Nov 01 '18 08:11 kennardconsulting

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

barbosaalr avatar Nov 19 '18 12:11 barbosaalr

The problem still persists on 02-01-2018

ricardoinaciojunior avatar Jan 03 '19 01:01 ricardoinaciojunior

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...)

triosw avatar Apr 03 '19 14:04 triosw

@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.

rpounder avatar Apr 10 '19 15:04 rpounder

No solution yet :(

atrujillofalcon avatar May 29 '19 21:05 atrujillofalcon

Good news i created a fixed on this issue 😄https://github.com/charliekassel/vuejs-datepicker/pull/718

Format: dd MMM yyyy

C4s9ZEYCnB

Format: dd/MM/yyyy

P2yZ5S2Df4

harlekoy avatar May 30 '19 08:05 harlekoy

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.

datepicker

renielsalvador avatar Oct 10 '19 07:10 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.

datepicker

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

MatheusMuriel avatar Oct 16 '19 18:10 MatheusMuriel

pr https://github.com/charliekassel/vuejs-datepicker/pull/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

ConorSheehan1 avatar Oct 21 '19 10:10 ConorSheehan1

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...

arthurbarbero avatar Dec 31 '19 13:12 arthurbarbero

@arthurbarbero You're right, the issue isn't about formatting, it's about parsing. Specifically this line https://github.com/charliekassel/vuejs-datepicker/blob/de0fc75fe6f6572eebf47f94da20716ab7690cff/src/components/DateInput.vue#L121 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.

dd/mm/yyyy working

ConorSheehan1 avatar Jan 02 '20 22:01 ConorSheehan1

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

arthurbarbero avatar Jan 03 '20 14:01 arthurbarbero

@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. Screenshot_20200104-115959__01

ConorSheehan1 avatar Jan 04 '20 13:01 ConorSheehan1

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.

hongdung92 avatar Apr 28 '20 04:04 hongdung92

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

9xcoder avatar Apr 23 '21 08:04 9xcoder

How is this still not fixed

sarunmrzn avatar Jun 21 '21 05:06 sarunmrzn

2021 and still the fix date format, sad.

jotapixma avatar Sep 23 '21 15:09 jotapixma

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.

atrujillofalcon avatar Sep 23 '21 21:09 atrujillofalcon

2022 End of May, still not fixed yet.

zawyehtutko avatar May 30 '22 09:05 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.

zawyehtutko avatar May 30 '22 09:05 zawyehtutko

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.

snakemastr avatar Oct 31 '23 09:10 snakemastr