Base solution for your next web application
Open Closed

angular - utc datetime to tenant timezone #9569


User avatar
0
BobIngham created

version irrelevant I use Kendo grid extensively throughout my system. In this scenario I call a KendoGridController in my Web.Host project which calls a method in my Application project which calls a stored procedure in an SQL repository. This works great and by using an IQueryable throughout the final query is built using the Kendo.DataSourceRequest and finally converted back to JSON using query.ToDataSourceResultAsync(request).ConfigureAwait(false). All of this works well but the dates passed back to the Angular component are in UTC, they by-pass Zero's ClockProvider.

That means I have to parse the dates in Angular and convert them back to the timezone of the tenant, not the user or the browser default, to display same in the Kendo grid. And then, because Kendo does not support Moment I have to convert back to vanilla javascript date. Here is my code:

... code removed for brevity
).subscribe((data) => {

let tenantTimezone = abp.timing.timeZoneInfo.iana.timeZoneId;

data.data.forEach((d) => {
  if (d.nextReviewTime) {
    let test = new Date(moment.tz(d.nextReviewTime, tenantTimezone).format());
    d.nextReviewTime = new Date(moment.utc(d.nextReviewTime).tz(tenantTimezone).format());
  }
... code removed for brevity

My value for d.nextReviewTime is 29/08/2020 23:00, perfect because it's the UTC value for a review on 30th August (entered in the UK). I am trying to cast this value back to the timezone of the tenant which I have changed to "South Africa Standard Time" (Windows) and "Africa/Johannesburg" (iana):

Can anyone tell me why the code results in a cast to GMT (British Summer Time) as per below?

I apologise in advance should I have missed something, I have tried every option available at Moment Timezone Documentation and can find no way of getting my UTC date to a South African datetime.

Can anyone point me in the right direction?


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    AspNet Zero also returns dates to Angular client in UTC and convertes them to user's timezone using https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/shared/utils/moment-format.pipe.ts.

    So, you can basically use moment(dateValue).format('L').

    If this doesn't work, and if you want to use a different timezone than current user's timezone, you can try;

    moment.tz(new Date(), "Africa/Johannesburg").format('L LT')

    abp.timing.timeZoneInfo.iana.timeZoneId should give you current user's IANA timezone id.

  • User Avatar
    0
    BobIngham created

    Hi @ismacagdas, Thanks for getting back. Maybe I'm a little confused here and not looking at the correct thing. The iana value "Africa/Johannesburg" is currently two hours ahead of UTC, therefore I would expect a conversion of date value "2020-08-26 23:00:00" to be converted to "2020-08-27 01:00:00": However, after the conversion only one hour is added to give me "2020-08-27 00:00:00": Am I not understanding this correctly? The idea is that a tenant in South Africa would always see date times in "South Africa Standard Time" and a tenant in the UK would always see date times in "GMT Standard Time" regardless of browser or user settings. What am I missing? Strictly speaking this may not be a Zero so thanks for any pointers.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    When I try this on browser console, it works as you want;

    Probably the problem is related that, you are converting the final formatted string into a new Date. Can you just use string result of moment("2020-08-26T23:00:00Z").tz("Africa/Johannesburg").format() in your table ?