Native Datepicker issue on mobile Chrome for Android

[francoislevesque]

Overview of the problem

Buefy version: 0.7.10
Vuejs version: 2.6.10
OS/Browser: Chrome mobile Android
Timezone: America/Toronto

Description

The native datepicker doesn't selected the correct date on Chrome Mobile for Android. I haven't tested the other mobile browsers.

Steps to reproduce

1. Create a simple b-datepicker component.
2. Open the test app on Android Chrome
3. Selected a date
4. The registered date is one day off

Expected behavior

The registered date should be the selected one.

Actual behavior

The registered date is one day off.

Video link

https://youtu.be/lklamdGzGbw

[jtommy]

Did you check the value (v-model) ?
Is it incorrect?

[afwn90cj93201nixr2e1re]

Try to change timezone on your phone, xD.

[francoislevesque]

It is currently 18:52 in Montreal, Canada (Eastern Time).

When I select the 27 of july and console.log the output of change event, I receive the following string:
Fri Jul 26 2019 20:00:00 GMT-0400 (Eastern Daylight Time)

The problem does not occur when using the buefy datepicker, only with the native one.

[francoislevesque]

The issue is here :

Datepicker.vue

/*
 * Parse date from string
 */
onChangeNativePicker(event) {
  const date = event.target.value
  console.log(date, new Date(date)) // I added this to see the values
  this.computedValue = date ? new Date(date) : null
},

date is the expected "2019-07-27". However, once it is converted to a Date object, it becomes 4 hours earlier (Eastern time is -4 hours), hence the Fri Jul 26 2019 20:00:00 GMT-0400 (Eastern Daylight Time).

Because of that, when the value is parsed in the input via the formatYYYYMMDD() methods, the getDay method returns the day in my timezone, 26, instead of the selected 27.

Update

This would be a quick and easy fix:

onChangeNativePicker(event) {
  const date = event.target.value
  this.computedValue = date ? new Date(date + ' 00:00:00') : null
},

Update 2

The detail behind why Y-m-d creates a date in UTC, and Y-m-d h:i:s create a date in user's timezone is described here: https://stackoverflow.com/a/21153059

Generally speaking, when dealing with Date objects in js, I believe it's better to avoid to automatic parsing and instead manually set the date.

[jtommy]

@francoislevesque indeed you can define a parser function, btw i'll add the quick fix