user-interfacekendo-uidatetimepickertimezone-offset

Date Timer Picker - Timezone offset suppression


I had some huge problems with Kendo UI Date(Time)Picker in a Kendo Form. (In Kendo Grid Popup, the Date(Time)Picker behaves different and does not add timezone offsets)

The problem was, that client side it always added a local timezone offset which led to "incorrect" dates in the database.

For example, i set the date to 2000/1/1 and in the database i would get the utc date 1999/12/31T22:00:00 with a two hour offset

Client side it displayed the date correct, but following processes in sql etc did not work any longer (eg invoice date), for obvious reasons


Solution

  • The problem itself only showed up sometimes and as I found out it was fairly easy to work around it.

    The model which is bound to the view allows ISO dates "yyyy-MM-dd..." and js Dates If the model loads data from the database it is filled with iso dates, if you set a model value with a datepicker, it sets a js date

    If you catch the json date and write it as an iso date to the model in the change event (datepicker/form), it will not do any timezone offset (because there is none)

    I used luxon, because it was just way more intuitive than js date, but you just have to diff the local timezone offset to utc and then convert it to a iso date string

    function dtp_suppressOffset(jsdateTime) {
        return luxon.DateTime.fromJSDate(jsdateTime).toISODate({ includeOffset: false })
    }
    

    Took me some time and it really made me mad, and i did not found good solutions, so here is mine workaround for whoever needs it