Formatted date for vue-date-pick is 1 day bigger

Hello, In my vue/cli 4/vuex / bootstrap-vue project app I install date picker with custom format, like here https://dbrekalo.github.io/vue-date-pick/examples.html#custom-date-parser

I use moment/moment-timezone in my project, so I do not want to use fecha as in example I have to convert date value from mysql to datepicker format and I have a problem that my converted date for datepicker is 1 day bigger...

I have in my component:

                        <date-pick
                                v-model="editableAd.expire_date_formatted"
                                :format="date_picker_format"
                                :parseDate="parseDate"
                                :formatDate="formatDate"
                                :inputAttributes="{size: 32}"
                        ></date-pick>

...
    import moment from 'moment-timezone'

    console.log('settingsTimeZone::')
    console.log(settingsTimeZone) // it shows Europe/Kiev

    moment.tz.setDefault(settingsTimeZone)

...
    date_picker_format: 'Do MMMM, YYYY',

...
    // setting formated date for dapicker
    this.editableAd.expire_date_formatted = this.formatDate(this.editableAd.expire_date, this.date_picker_format)
...

            formatDate(dateObj) {

                console.log('typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj)  // it has ‘2023-01-19’ value

                if (typeof dateObj === 'string') {
                    dateObj = moment(dateObj, this.date_picker_format)
                }
                console.log('++typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj)

                console.log('RESULT moment(dateObj).format(this.date_picker_format)::')
                console.log(moment(dateObj).format(this.date_picker_format)) // BUT it has ‘20th January, 2023’ value

                return moment(dateObj).format(this.date_picker_format) // returns invalid ‘20th January, 2023’ value

which I see in datepicker

What I see in console for dateObj var : https://imgur.com/a/KZLtXiL

"bootstrap-vue": "^2.1.0",
  "font-awesome": "^4.7.0",
  "moment": "^2.24.0",
  "moment-timezone": "^0.5.27",
  "vue": "^2.6.10",
  "vue-date-pick": "^1.2.1",

Why error and how it can be fixed?

Thanks!

fylzero

6 years ago

Level 67

@petrogromovo I might try removing moment.tz.setDefault(settingsTimeZone) from this code. Moment inherently figures out the user's timezone. I didn't know this a while back and was banging my head against a wall trying to figure this out.

If your server is storing UTC... and you set the timezone in moment to expect a local timezone... it will adjust the UTC diff based on the timezone specified.

It actually makes sense. Laravel/Carbon works natively with UTC, Moment digests UTC natively to the local detected time with no added config needed.

24 likes

PetroGromovo

6 years ago

Level 5

I reoved moment-timezone but still have same problems Meanwhile I work locally at my local laptop with apache under Kubuntu18 In /etc/php/7.2/cli/php.ini I have

Timezone ='Europe/Kiev'
date.timezone = "UTC"

and in phpinfo output I see :

"Olson" Timezone Database Version   0.system
Timezone Database   internal
Default timezone    UTC

Can that be the issue? Also How can I check timezone params of vuejs app?

PetroGromovo

6 years ago

Level 5

I removed moment.tz from my project. In /etc/php/7.2/apache2/php.ini I changed

Timezone ='Europe/Uzhgorod'  // That it near my place I live
date.timezone = "Europe/Uzhgorod"

So my phpinfo has output :

"Olson" Timezone Database Version   0.system
Timezone Database   internal
Default timezone    Europe/Uzhgorod

I searched how to get a timezone from client browser and found this https://stackoverflow.com/questions/6939685/get-client-time-zone-from-browser branch

and checking :

            var timedifference = new Date().getTimezoneOffset();
            console.log('timedifference::')
            console.log(timedifference)

            var rightNow = new Date();
            var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
            var temp = jan1.toGMTString();
            var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
            var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
            console.log('std_time_offset::')
            console.log(std_time_offset)


            let jstz = require('jstimezonedetect')
            let timezone = jstz.determine()
            console.log('timezone::')
            console.log(timezone)

            console.log('===========================')

I have next output : https://imgur.com/a/84RqqPJ

and again running code when I see date is changed +1 day :

                console.log('__')
                console.log('__')

                console.log('typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj)

                if (typeof dateObj === 'string') {
                    dateObj = moment(dateObj, this.date_picker_format)
                }
                console.log('++typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj) // it has ‘2023-01-19’ value


                console.log('RESULT moment(dateObj).format(this.date_picker_format)::')
                console.log(moment(dateObj).format(this.date_picker_format)) // BUT it has ‘20th January, 2023’ value

                return moment(dateObj).format(this.date_picker_format)

and What I see in console : https://imgur.com/a/Y1aSBez That is strange that .d has 20 day. What is it? Some day zero based option? How can it be salved?

PetroGromovo

6 years ago

Level 5

Have anybody such a problem ? How did you salve it ?

Please or to participate in this conversation.