vuejs-datepicker
vuejs-datepicker copied to clipboard
charliekassel
Typing in a date with yyyy-MM-dd format selects wrong day
It would be great to allow direct input of the MySQL format but typing it in triggers the previous day to be selected in the calendar.
'yyyy-MM-d' format works as expected.
In order to fix this in my project I changed the parseTypedDate method as follows...
parseTypedDate: function parseTypedDate (event) { // close calendar if escape or enter are pressed if ([ 27, // escape 13 // enter ].includes(event.keyCode)) { this.input.blur(); } if (this.typeable) { var typedDate = Date.parse(this.input.value.replace(/-/g,'/')); if (!isNaN(typedDate)) { this.typedDate = this.input.value; this.$emit('typedDate', new Date(this.typedDate.replace(/-/g,'/'))); } } },
One may be facing this issue based on the timezone. If you're behind UTC, you may be facing this issue. This is related to how the browser parses the date.
To illustrate, try typing new Date('2019-06-20') in your browser console and check the output. You may see '19th June' there.
While typing new Date(2019, 05, 20) (Months start from 0 here) brings expected output.
The library can be updated to parse the date this way to solve this issue.
uhhh, that's really a bummer to see that... to bizarre this behaviour...
new Date(): Date Sat Jul 20 2019 16:20:14 GMT-0400 (Chilenische Normalzeit) new Date('2019-07-20'): Date Fri Jul 19 2019 20:00:00 GMT-0400 (Chilenische Normalzeit)
So apparently new Date('2019-07-20') is parsed with hours: 00:00:00 so it discounts 4 hours ()in my case because of the timezone offset thus giving 24-4hrs=20.
THERE IS A DIFFERENT WORKAROUND As mentioned above, you could divide the date string into year, month, day and pass the value with commas OR instead of passing only the date as value, add the GMT difference to it (OBS: only for negative GMTs, in the case of positive GMT differences there's nothing to do) e.g.: :value="this.date+' '+ (new Date().getTimezoneOffset()/60)+':00:01'" this creates '2019-07-20 4:00:01' which, when discounting the offset should give the right result At least in my case with GMT-4 it outputs the correct Date Just as an explanation: getTimezoneOffset is outputting minutes, not hours, and in a timezone -4 it will output a positive value 240. this is why the value has to be divided by 60 and needs not to be put negative... I know, bizarre, but at least there's a workaround
Until the library is fixed one work around can be to just add a fictional 12pm time? So new Date(this.date+'T12:00:00') +11 to -11 no matter which timezone they are in it'll still be the right day
Until the library is fixed one work around can be to just add a fictional 12pm time? So
new Date(this.date+'T12:00:00')+11 to -11 no matter which timezone they are in it'll still be the right day
You'd think so but no, it can still cause issues with certain timezones
Wow, this is quite a dated issue and still not update? Does anyone know the status of this project? Has it been "abandoned"
@maxim25 You recently commented on this project so I thought I would ping you. I am trying to use this component and allow users to enter into the component object, but I can't seem to figure out how to enable data entry? Is this something that should work by default, or must I enable it (I don't see it as an available prop?)
@maxim25 You recently commented on this project so I thought I would ping you. I am trying to use this component and allow users to enter into the component object, but I can't seem to figure out how to enable data entry? Is this something that should work by default, or must I enable it (I don't see it as an available prop?)
Add :typeable="true"
@maxim25 thank you so much, I can’t believe I missed that. I read and reread the props section but bypassed it obviously.
This is such a severe bug - that picking one date results in another being recorded - that it can only serve as an indicator of an abandoned project.
