Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PetroGromovo's avatar

Selecting time in vue2-datepicker picker

Hello! In my Laravel 5/vuejs 2.6 I use "vue2-datepicker": "^2.11.2" and I need to use it as time selector, which is related mysql time field. I do it with code :

<date-picker
      v-model="hostelExtraDetailsArray.reception_hours_start"
      type="datetime"
      :time-picker-options="timePickerOptions"
      id="cbx_extra_details_reception_hours_start"
      :lang="'en'"
      :type="'time'"
      :format="'hh:mm A'"
      :placeholder="'Select hours start'"
></date-picker>

<label :for="'cbx_extra_details_reception_hours_start'" class="">&nbsp;
   <span>Reception hours start</span>
</label>

        data() {
            return {
                ...
                hostelExtraDetailsArray : [],
                timePickerOptions:{
                    start: '00:00',
                    step: '00:10',
                    end: '23:50'
                },

But when I open the page and read data from db(hostelExtraDetailsArray.reception_hours_start), which is "08:30:00", nothing is shown in time picker, but I expected to see "08:30"...

If to select some value, ex . 01:20 AM hostelExtraDetailsArray.reception_hours_start is filled with value 019-08-18T22:20:00.000Z and my question to to fill it with time value only and why I have 3 hours shift?

On my kubuntu 18 I have GMT+2 time zone, but I am not sure if I have timezone for my vue ...

How to make it ?

Thanks!

0 likes
1 reply
PetroGromovo's avatar

After some additive testing I found that to have valid default value for time picker I need to convert string time value 21:50:00 into format 2019-08-27T21:50:00.000Z I have installed :

        "vue": "^2.6.10",
        "moment-timezone": "^0.5.26",
        "vue-moment": "^4.0.0",

and in my resources/js/app.js :

import moment from 'moment-timezone'

timezone-in-vuejs-8b1df48d35bb
moment.tz.setDefault('Europe/Kiev')

How better to make this convirting without depend on timezone ?

Please or to participate in this conversation.