Can Today button be configured to use UTC?

[Niklas Kjellander]

If date time picker control is used to select a date and time in UTC, can the today button be configured to calculate today from UTC and not from (I assume) the browser's locale settings? 

Let's say that the user's browser/system is configured with a time zone that is "ahead" of UTC like UTC+01:00 - Amsterdam, Berlin, Rome... 

If a user opens the date time picker control after 00:00 (but before 01:00) in that time zone, then clicking the today button will produce a date time where the day is set to the next day compared to what it actually is in UTC. The resulting date time can be converted to UTC without problem, but it gets a bit trickier if the date time picker is limited to picking date that is <= UTC now when control is opened, then the today button will be disabled every day between 00:00 and 01:00. I suppose the max date limit could be converted to the time zone that the control is using. So is it possible to configure the date time picker to edit date time in UTC instead of the users time zone?

Best regards,

Niklas

[Priyanka Karthikeyan]

Hi Niklas Kjellander,

 

Greetings from Syncfusion Support

 

To display the current UTC time when the 'Today' button is clicked, you can bind the click event for the 'Today' button inside the OnOpen event and update the value using the current UTC time. Below is a code snippet and sample for your reference:

 

Index.razor

@inject IJSRuntime JSRuntime

 

<SfDateTimePicker ShowClearButton="true" TValue="DateTime?" @bind-Value="SelectedDate" >
    <DateTimePickerEvents TValue="DateTime?" OnOpen="HandleOpen"></DateTimePickerEvents>
</SfDateTimePicker>

 

@code {
    private DateTime? SelectedDate { get; set; }

 

    private async Task HandleOpen(object args)
    {
        await JSRuntime.InvokeVoidAsync("today", DotNetObjectReference.Create(this), nameof(ShowPopup));
    }
    [JSInvokable]
    public async Task ShowPopup()
    {
        SelectedDate = DateTime.UtcNow;
        StateHasChanged();
    }
}
 Host.cshtml

<script>
        window.today = function (instance, callback) {
            setTimeout(function () {
                var todayButton = document.querySelector('.e-btn.e-today');
                todayButton.addEventListener('click', function (){
                    instance.invokeMethodAsync(callback); 
                });
            }, 200);
        }
    </script>

 

API Reference: https://blazor.syncfusion.com/documentation/datetime-picker/events#onopen

 

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.

 

 

Regards,

Priyanka K

Attachment: TodayButton_534d3648.zip

[Niklas Kjellander]

Hi  Priyanka and thanks for the example on how to get current data and time when clicking the today button.

There's another aspect that I think you didn't cover and that is that the today button gets enabled/disabled depending on how the Max and Min properties of the date time picker is configured. If the Max property is always set to UTC now when the control is opened, the button gets disabled for a period of time each day when the UTC time is close to 00:00.

This is what the control looks like when time is 2024-08-01 23:47:13Z, Max property is set to that time. I can also mention that even though August second looks like a valid clickable date it cannot be clicked.

This is a snapshot a few minutes later from the browsers dev console that shows the Operating System date and time setup

So it seems that the date time picker is using the browser/OS settings for determining what dates to enable and how to enable the today button. 

What I would like is to be able to configure the date time picker with a time zone (UTC) that is should use for internal logic of enabling of controls in the date time picker. That should also affect what the bound selected value is set to, it probably needs to be DateTimeOffset or some other data type that supports a custom time zone since DateTime only supports Local and UTC ( DateTimeKind Enum (System) | Microsoft Learn).

Kindly,

Niklas

[Priyanka Karthikeyan]

Hi Niklas Kjellander,

 

Sorry for the delay. By default, a Blazor Server application operates based on the time zone of the server where it's hosted. Consequently, when you access the application from a client in a different time zone, the DateTime values will reflect the server’s time zone. This is expected behavior. The 'Today' button in the SfDateTimePicker will be enabled or disabled based on the Max property setting.

We noticed that when the Max property is set to UTC and the control is opened near midnight UTC, the 'Today' button may become disabled temporarily. Could you please provide more details about your expectation in this context?

Additionally, the SfDateTimePicker component can also support DateTimeOffset:

 

Here's an example:

 

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

 

 

@code { 

 

    public DateTimeOffset? DTPickerDate1 { get; set; } 

 

 

 

You can explore this further in the sample below:Sample

 

For more information on converting dates and times based on time zones, you may find these resources helpful:

• How to Convert Date and Time to a Client's Time Zone in Blazor Server
• Syncfusion Forum on Time Zone Conversion

If there’s any aspect of your requirement that we might have misunderstood, we would appreciate it if you could provide additional details. This will help us better understand your scenario and offer the most effective assistance.

Thank you for your understanding and cooperation.

Regards,

Priyanka K

[Niklas Kjellander]

Sorry for a delayed reply on my part too here. 

I think the short answer to the question is that we would like the today button to be enabled when today is inside the range of allowed date times for the control. Future scenarios for us may include that there is a system defined timezone that should be used to convert all datetime values before they are presented to the user. There may also be option for user to override this and select a timezone of their own preference.

Hope that this clarifies things a bit.

Kindly,

Nikilas

[Priyanka Karthikeyan]

Hi Niklas Kjellander,

Thank you for your update. We would like to inform you that We have considered “Need to provide an API for handling the  timezone values in DateTimePicker with DateTimeOffset” as a uncertain feature request from our end and logged the report for the same and the fix will be included with any of our upcoming releases.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link:

Feedback link:https://www.syncfusion.com/feedback/59687/need-to-provide-an-api-for-handling-the-different-server-and-client-timezone

Please upvote this feature to make this our priority. We will prioritize the features every release, based on the user demands.

Regards,

Priyanka K