wired-calendar selected day can't be update programatically...?

[hoangph271]

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

[apennamen]

Hello,
I've tested quickly in glitch, I think the problem comes from the toLocaleDateString format:
Here selected="Apr 23, 2020"

Here selected="04/28/2020"

One workaround would be to format the date before passing it to the calendar.

[apennamen]

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

[hoangph271]

So the problem should be solved by changing how wired-calendar handle selected, or updating README.md to point this out...?

[apennamen]

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,