Bug in calendar

[etiennea]

• Framework7 version: Vue 5.7.14

Describe the bug

We are getting lots of reports of October missing in the calendar around the 1960 dates. Have not figured out how to reproduce or on what platform but it is clearly a thing. We have traffic of only 100s of users a day and it is reported often.

I have attached videos from a user

https://user-images.githubusercontent.com/1151237/114323556-a6385a80-9b1d-11eb-9871-6661dbfc0dbc.mp4

Also jumps the month when using the arrows, I have a video of this too if needed.

[DAnn2012]

This bug appears to be related to daylight saving time.

On my Mac with OS X El Capitan 10.11.6 (15G22010) and the latest supported version of Safari (the now very old version 11.1.2 - 11605.3.8.1) and the browser language set to Italian, I tried for example with the year 1967 and these are the results.

For example, if I choose the year 1967 and the month of March from the list, the calendar shows March 26, 1967 twice (as Sunday and erroneously also as Monday) and all subsequent days are consequently shifted by one position:

but in the inspector the "data-day" and "data-date" fields are correct:

While with the latest version of Firefox supported (currently version 78.9.0esr), the calendar is shown correctly:

But the problem also affects other months and other years.

Maybe it could relate to the problem described here: https://stackoverflow.com/questions/56242641/dates-in-safari-appear-off-by-one-using-intl-datetimeformat-with-en-us-locale

These are the dates for daylight saving time for my language (Italian), to verify the malfunction for other years.

Thanks.

[DAnn2012]

@nolimits4web

Can this link help?

Here it is explained that to avoid DST problems it is not convenient to use .getTime and 24 * 60 * 60 * 1000.

https://github.com/framework7io/framework7/blob/a58ef126cc942260623bf1dd85cd0eda9b3e8d9e/src/core/components/calendar/calendar-class.js#L480

https://github.com/framework7io/framework7/blob/a58ef126cc942260623bf1dd85cd0eda9b3e8d9e/src/core/components/calendar/calendar-class.js#L696-L699

https://github.com/framework7io/framework7/blob/a58ef126cc942260623bf1dd85cd0eda9b3e8d9e/src/core/components/calendar/calendar-class.js#L1230

https://github.com/framework7io/framework7/blob/a0c853dbc5650fe8adcf6b716eff5cf797523571/kitchen-sink/core/pages/calendar-page.html#L143

https://github.com/framework7io/framework7/blob/78d29c14de9facb26a763a595e3d70f06e929f9e/kitchen-sink/react/src/pages/calendar-page.jsx#L57

https://github.com/framework7io/framework7/blob/78d29c14de9facb26a763a595e3d70f06e929f9e/kitchen-sink/svelte/src/pages/calendar-page.svelte#L56

https://github.com/framework7io/framework7/blob/78d29c14de9facb26a763a595e3d70f06e929f9e/kitchen-sink/vue/src/pages/calendar-page.vue#L92

and perhaps these too

https://github.com/framework7io/framework7/blob/a58ef126cc942260623bf1dd85cd0eda9b3e8d9e/src/core/components/calendar/calendar-class.js#L641-L650

Thanks.

[etiennea]

This seems like the problem! Well done. @nolimits4web any chance this can be fixed?

It is now a problem when selecting current date but anyone using this component to select a birthday will encounter this problem at scale!

[DAnn2012]

@nolimits4web I've done some testing with the hack described here (add "12:00" to new Date or the equivalent date.setHours(12, 0, 0, 0)) and the situation seems to be improving, but I still can't figure out how to transfer the exact result of the selected date into the relevant input field.

[nolimits4web]

@DAnn2012 what/how did you exactly used (that hack)?

[DAnn2012]

@nolimits4web these are the changes I made to the code to test this hack, but I will tell you right away that it is only a "Proof of Concept" as the value returned in the input field is still the wrong one of 1 day and there are still some things to be analyzed and fixed such as the dates selected that are not highlighted in the calendar and the wrong times in the time picker.

1) After this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L699

and this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L734

I entered this line valueDate.setHours(12, 0, 0, 0);

2) After this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1200

and this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1209

and this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1213

I entered this line date.setHours(12, 0, 0, 0);

3) After this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1269

and this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1279

I entered this line 12, 0, 0, 0

4) I changed this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1282

in this line dayDate = new Date(year, month, dayNumber, 12, 0, 0, 0).getTime();

5) After this line https://github.com/framework7io/framework7/blob/ce7a2dc21b29a05d6c782bd53a4155f542867d9c/src/core/components/calendar/calendar-class.js#L1365

I entered this line dayDate.setHours(12, 0, 0, 0);

In Safari 11.1.2 on OS X El Capitan 10.11.6 (15G22010) and Italian language now the calendar days are shown correctly (see example of March 1967), but there are some problems such as the ones I specified above (value returned in the input field is still the wrong one of 1 day, the dates selected that are not highlighted in the calendar and wrong times in the time picker).

Thanks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DAnn2012]

This issue also occurs with the current version 7.0.1 with Safari 11.1.2 on OS X El Capitan 10.11.6 (15G22010), but while f7 v6 in the package.json file was declared compatible with Safari 11 and above

https://github.com/framework7io/framework7/blob/5cd7552438d65fb76f21236e9271e267af2a5fd3/package.json#L64

the current version 7.0.1 is declared compatible with Safari 13 and above.

https://github.com/framework7io/framework7/blob/c6bc8338ba47941d9ba5255c1f7b02c239241de3/package.json#L64