Vue2-datepicker: Date is descressed

[zaqpiotr]

Hello Everyone!

I have a problem.
When I'm picking date for example:
2018-01-19 12:00
in model I have hour decreased by one:
2018-01-19 11:00

When I'm picking the date I want the exact hour :)
Please help.

Example:

My code:

<date-picker
    id="orderDeliveryDate"
    name="orderDeliveryDate"
    v-validate="'required'"
    v-model="order.delivery.endOfProduction"
    :not-before="this.order.creation"
    type="datetime"
    :confirm="true"
    :minute-step="5"
    format="yyyy-MM-dd HH:mm:ss"
    lang="en
>
</date-picker>

[mengxiong10]

I think it's a timezone problem.
The DatePicker return a local time Date Objects.
The toISOString() method returns a universal time string(YYYY-MM-DDTHH:mm:ss.sssZ).
So it's the same time, just the formatting is different.
If you want to pick a universal time instead of local time. You need to transform the Date two times.
fyi
https://jsfiddle.net/mengxiong/td1hj356/1/

[zaqpiotr]

Can You provide something to manage this time zones to Your component?

[mengxiong10]

@zaqpiotr
I consider adding a parameter in the next version to pick local time or UTC time

[saintplay]

@mengxiong10 yes please, can I make a PR for the use-utc prop?

[mengxiong10]

@saintplay sure.

[ghost]

will you implement this any time soon?

[mengxiong10]

It is very difficult to be compatible with all situations
There is no plan to complete it now.
I think the biggest problem is that the formatting time is UTC time.
Time is best stored in the backend with a timestamp.
If you need a string, you can use the internal formatting function.

import DatePicker from 'vue2-datepicker'

DatePicker.fecha.format(new Date(value), 'YYYY-MM-DDTHH:mm:ss')

[rhymes]

You should also probably consider switching from fetcha to date-fns which has a better support for time zones.

I just did a test with plain JS, fecha and date-fns:

    const dtformat = 'YYYY-MM-DDTHH:mm:ss.SSSZ'
    console.log('date', value)
    console.log('date-locale-string', value.toLocaleString())
    console.log('fecha', fecha.format(value, dtformat))
    console.log('date-fns', format(value, dtformat))

date Date 2018-07-17T19:11:00.000Z
date-locale-string 7/17/2018, 9:11:00 PM
fecha 2018-07-17T21:11:00.000Z
date-fns 2018-07-17T21:11:00.000+02:00

As you can see fecha reports the date being 21:11 on UTC timezone, instead the date is 21:11 on +02:00 timezone or 19:11 on UTC timezone as JavaScript correctly reports printing the date object

[warlord0]

Very useful topic - even if the title is a little odd. I have suffered the same problem today.

I have four date-pickers on one form. Three of them work just fine, but one of them uses a different timezone!

The date values are initially set using a value in the form YYYY-MM-DD as can be seen in the vue devtools.

But when I submit/save the for the values become datetime formats and are sent to the api as json like this:

{
"id":364,

"from":"2018-02-01T00:00:00.000Z",
"to":"2018-06-08T23:00:00.000Z",

"document_request":"0000-00-00",
"document_return":"0000-00-00",

}

The from and to have been modified using the date-picker the document dates have not been altered.

Looking at devtools I can see my data object:

from:Thu Feb 01 2018 00:00:00 GMT+0000 (Greenwich Mean Time)
to:Sat Jun 09 2018 00:00:00 GMT+0100 (British Summer Time)

I'm puzzled why both objects use different timezones, GMT and BST They are built the same. Even tried to use use-utc as I'm not concerned about times at all - just the date.

    <div class="col-12 col-md-4 mb-2">
      <label
        for="from"
        class="control-label"
      >
        Contract Start Date
      </label>
      <date-picker
        id="from"
        v-model="contract.from"
        :disabled="contract.approved != 0"
        input-class="form-control"
        class="w-100"
        name="from"
        type="date"
        lang="en"
        use-utc="true"
        format="DD/MM/YYYY"
      />
      <div class="invalid-feedback">
        You must enter a valid start date
      </div>
    </div>

    <div class="col-12 col-md-4 mb-2">
      <label
        for="to"
        class="control-label"
      >
        Contract End Date
      </label>
      <date-picker
        id="to"
        v-model="contract.to"
        :disabled="contract.approved != 0"
        input-class="form-control"
        class="w-100"
        name="to"
        type="date"
        lang="en"
        use-utc="true"
        format="DD/MM/YYYY"
      />
      <div class="invalid-feedback">
        You must enter a valid end date
      </div>
    </div>

Any one got any clue why it would be like this?

[warlord0]

I think this isn't a problem with the date picker. It looks like normal JavaScript behaviour. If I pick a date between March and October it's BST, November to March is GMT - which is correct.

The problem is when I save it to the backend database it assumes UTC and adjust the date time by subtracting an hour and I end up with the wrong date stored.

So it's a fix I need to put in elsewhere.

[AnikaErceg]

Posting this in case it might inspire someone: using momentJS helped keep the consistency between how front end and back end handle the dates.
On change event, I format the date to a basic "YYYY-MM-DD" format and send that to server.
Component very well understands when it gets this kind of format so it didn't cause any further issues.

[zaqpiotr]

I have found different work around on server side

[016]

for new version v2.11.0 add valueType="format" will solved this problem, just add note for people like me 2 hours ago :)