How to specify TimeZone for DateTimePicker?

[Jonas Antvorskov]

How do you specify which timezone should be used for the date time picker? I don't see any properties on the component that suggest you can specify which timezone should be used, so how can I avoid showing the user time spans that don't exist in their timezone and allow them to specify which side of a DST shift they are referring  to when the clock-face time is ambiguous?

[UdhayaKumar Duraisamy]

Hi Jonas,

We are validating the requirement. We will update the further details in two business days (5^th September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Jonas,

Sorry for the inconvenience caused.

Due to complexity, We are still validating the requirement. We will update the further details in two business days (8^th September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Jonas,

Sorry for the inconvenience caused. We were able to convert the date and time to a client’s or user’s time zone in Blazor Server. Please refer to the below documentation for more details.

https://www.syncfusion.com/faq/blazor/javascript-interop/how-do-you-convert-the-date-and-time-to-a-clients-or-users-time-zone-in-blazor-server

Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

1. Exact Requirement details.
2. Requirement use case scenario.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D

[Jonas Antvorskov]

It doesn't solve the issue, maybe I haven't been clear enough in my query. I can't find a way to specify which timezone the DateTimePicker should use, so there doesn't appear to be any way for the component to tell when Daylight Savings Time (DST) starts and ends for the user, if the component can't tell when DST starts and ends, there's no way it can remove the clock-face time span that doesn't exist from the selector, and there's no way for the component to tell which clock-face time span should be duplicated in the selector.

[UdhayaKumar Duraisamy]

Hi Jonas,

We are validating the requirement. We will update the further details in two business days (21^st September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Jonas,

Sorry for the inconvenience caused.

The DateTimePicker shows the date and time based on the hosted server location. We can get the UTC time by changing the TValue to DateTimeOffset. Please refer to the code below, 

<SfDateTimePicker TValue="DateTimeOffset?" @bind-Value="DTPickerDate1"></SfDateTimePicker> 

 

 

@code { 

 

    public DateTimeOffset? DTPickerDate1 { get; set; } 

 

Screenshot:

  

Please find the sample below, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimePicker-1932233145 

We can also able to convert the selected Date and Time value to any timeZone using the change event of the component. Please refer to the below code snippet and sample.

@using Syncfusion.Blazor.Calendars

 

<p>DateTimePicker value is: @DateValue</p>

 

<p>Eastern Time :@converedTime </p>

 

<SfDateTimePicker TValue="DateTime?" @bind-Value="@DateValue" Width="300px">

    <DateTimePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler"></DateTimePickerEvents>

</SfDateTimePicker>

 

@code {

    public DateTime? DateValue { get; set; }

   

    public DateTime converedTime;

 

    public void ValueChangeHandler(ChangedEventArgs<DateTime?> args)

    {

        var timeZoneInfo = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

        converedTime = TimeZoneInfo.ConvertTime(Convert.ToDateTime(DateValue), timeZoneInfo);

    }

}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DTP_TimeZone-1096895960

Regards,

Udhaya Kumar D

[Jonas Antvorskov]

Sorry if I haven't been clear in my query, but the samples you've sent exhibit the exact problem I was trying to correct.

If I want to make a DateTimePicker to be used in the context of the "Europe/Copenhagen" timezone as my computer is configured to use, I can tell that the samples you've provided does somehow know that timezone but it doesn't display this in any way. As a concrete example, DST ends for the "Europe/Copenhagen" timezone on 2022-10-30T03:00:00+0200, this means that the timeline in the selector when the selected date is 2022-10-30 the time selector should go:

• 01.00
• 01.30
• 02.00
• 02.30
• 02.00
• 02.30
• 03.00
• 03.30

But it goes:

• 01.00
• 01.30
• 02.00
• 02.30
• 03.00
• 03.30

This means that there is an entire hour you can't select on this date, the problem is also present on the date where DST starts, but in this case you can select an hour that doesn't exist in the timezone.

[UdhayaKumar Duraisamy]

Hi Jonas,

We are validating the requirement. We will update the further details in two business days (10^th October 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Jonas,

The Blazor DateTimePicker component only allows the end users to enter or select/pick date and time values from a pop-up calendar and drop-down time list. The Time popup will show values only for 24hrs. If you want the selected Date and Time to a particular time Zone, then we need to convert it manually as like mentioned in the previous response. Also, The DateTimePicker works based on the server timeZone.

The DST(Daylight saving time) is the practice of setting the clocks forward one hour from standard time during the summer months, and back again in the fall, in order to make better use of natural daylight and it’s not a timeZone.

To know more about Syncfusion DateTimePicker please refer to the below documentation,

Getting Started : https://blazor.syncfusion.com/documentation/datetime-picker/getting-started

Online Demo : https://blazor.syncfusion.com/demos/datetime-picker/default-functionalities?theme=fluent

Regards,

Udhaya Kumar D