search

mariomka / vue-datetime

Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
http://mariomka.github.io/vue-datetime
MIT License
987 stars 246 forks source link

Datepicker displays correct date, but its value is incorrect. Also, selecting a date initially sets to the day before #224

Open zhegwood opened 4 years ago

zhegwood commented 4 years ago

Versions

Description:

When I have a vue-datepicker instance configured to use date, the date that is picked displays correctly, but the value that is stored is incorrect, thus causing the incorrect date to be sent to the backend for processing.

Steps To Reproduce:

Configure your vue-datetime instance as such: <datetime v-model="my_date" :auto="true" :min-datetime="now" format="LL/dd/yyyy" type="date"

When I select a date, say 6/12/2020 the display shows 6/12/2020, but the value is 2020-06-13T00:00:00.000Z. This value is being passed to the backend and should be 6/12, not 6/13

Also, when a date is picked, the datepicker shows the day before. If you pick again, the date shown is correct. The incorrect value problem persists in both cases.

Including a reproduction would be great. You can fork this fiddle: https://jsfiddle.net/4n63pozf/

dawsmith06 commented 4 years ago

Same issue. it's really frustrating

mariomka commented 4 years ago

What is your local timezone? By default the value's timezone is UTC, see the value-zone option.

zhegwood commented 4 years ago

Local timezone shouldn't matter. If I select a date it should display that date. Timezone conversion should be handled on the backend.

richbai90 commented 4 years ago

Having the same issue. Changing the value-zone option to local doesn't help, in my case it changes the value to midnight instead of the UTC+- offset value.

richbai90 commented 4 years ago

It seems to happen only when using a date other than today's date. If I leave the date alone and press okay, and then select the time, the value is correctly stored.

taurasOpen commented 4 years ago

In my case, i changed my server timezone. also default settings in laravel (config > app.php -> timezone). By default it was UTC, so i changed to "Europe/City". Also added value-zone="Europe/City". Now it works as expected. Value is correct and backend picks it correctly.

app.config 'timezone' => 'Europe/Vilnius'

linux server (ubuntu) sudo timedatectl set-timezone Europe/Vilnius

plugin

<datetime
    v-model="..."
    type="datetime"
     :format="{ year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true }"
    :hour-step="1"
    :minute-step="5"
    :min-datetime="..."
    :max-datetime="..."
    use12-hour
    :auto="true"
    placeholder="..."
    value-zone="Europe/Vilnius"
></datetime>

returns 2020-07-10T04:10:00.000+03:00

which in my case is correct. Tested with 12 hour and 24 hour settings.

glyl commented 4 years ago

I had the exact same issue as OP -- specifically, only when type="date". I ended up fixing it by upgrading luxon from 1.11.2 to 1.22.0.

vue: 2.6.11 vue-datetime: 1.0.0-beta.10 luxon: 1.22.0