Home > OS >  Kendo UI display UTC to AEST / AEDT
Kendo UI display UTC to AEST / AEDT

Time:03-11

I have a Kendo UI grid that fetches data from API by AJAX call. It has a column with date and the date is coming from backend in this format "2022-03-08T19:02:00".

This is one of the column of my grid where I am parsing the date :

{
                        field: "createdDate",
                        title: "Created Date",
                        template:"<div class='createdDateTemplate'>#= kendo.toString(kendo.parseDate(createdDate)) #</div>",
                        width: 150
                    }

I want to display this date in AEST or AEDT which ever is being followed . Is this possible from the template itself ?

EDIT :

I know that Kendo automatically renders date time in local format something like this for me:

GMT 1000 (Australian Eastern Standard Time)

But is it possible to display this time with 10 added to time itself ?

Edit: I am trying this template:"<div class='createdDateTemplate'>#= kendo.toString(kendo.timezone.convert(kendo.parseDate(createdDate), 'Etc/UTC', 'Etc/GMT 10'), 'dd/MM/yyyy hh:mm tt') #</div>", but I am getting this error: Cannot read properties of null (reading 'getFullYear')

CodePudding user response:

Kendo automatically converts the dates to the user's local time if you add zzz to the end of date , like this yyyy-MM-ddTHH:mm:sszzz. One more thing , you say that your date is UTC but it doesn't have a Z (zero utc offset) at the end. Kendo won't add the offset without it , so I would recommend adding it. Maybe you could try something like this:

#= kendo.toString(kendo.parseDate(modifiedDate 'Z','yyyy-MM-ddTHH:mm:sszzz'), 'dd/MM/yyyy hh:mm tt')#

CodePudding user response:

Yes, you can display the date however you like it. Read the Kendo Date Parsing documentation. I would suggest though that the back-end send it in ISO format (e.g. yyyy-MM-ddTHH:mm:ss). So that on the front-end, you can just do parseDate without the need for additional parameters. Perhaps depending on the language setting of the browser it will be shown in AEST or AEDT format. If not, then you can do toString on the date.

  • Related