wired-calendar selected day can't be update programatically...?
hoangph271 opened this issue ยท 4 comments
I'm using wired-calendar with Vue.js with as following:
<template>
<wired-calendar
:selected="selectedDate.toLocaleDateString()"
:lastdate="new Date().toLocaleDateString()"
@selected="$emit('change', $event)"
/>
</template>
<script>
export default {
props: {
selectedDate: Date,
},
}
</script>
Although the attribute "selected" is rendered correctly in the HTML, wired-calendar doesn't seem to highlight the selected day...?
To elaborate a bit further, here is the spec regarding the format that this calendar can understand:
https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
IMO, the easiest way to set a day with this calendar is to use the string format YYYY-MM-DD
But there is some traps ! The Date constructors return moments in local time, so you can't expect reproductible behaviour if you don't take this into account.
For example, if I create a date like this:
const date = new Date('12 April 2020'); // Created in my local time, for me it's UTC+2
const formattedDate = date.toISOString().substr(0,10); // Formatted in UTC+0 time
console.log(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`)
console.log(formattedDate);
The first console.log will output FOR ME (but maybe not for another user, depending on its timezone): "2020-4-12"
because it represents the 12th of April 2020 at midnight (00:00).
And the second one: "2020-04-11"
because it represents the same moment, but in a different timezone, so the 11th of April at 22:00.
That's why it's more accurate to speak of a "moment" rather than a date.
I think the calendar README should point to a bunch of good ressources on how to work with dates in JS and format them and all th subtilities (like months starting at 0), because it is aaaaalways a mess :P
So the problem should be solved by changing how wired-calendar handle selected
, or updating README.md
to point this out...?
I think we could improve the readme, that's never bad ๐
But in your particular case, the method you use would not work even with the Date object. For example with my Locale fr-FR:
new Date (new Date().toLocaleDateString())
//> output: Invalid Date {}
Frist toLocaleString
won't have predictable results, because it depends on your user system/navigator.
Second, you can't use the output format of toLocaleDateString as an input for a new Date.
However, you can use:
new Date(new Date().toDateString())
Regards,