Date Inputs and Pickers with DateTimeOffset

Environment

Product DateInput for Blazor, DateTimePicker for Blazor, TimePicker for Blazor, DatePicker for Blazor

Question

Can I use a DateTimeOffset field with the Telerik date input and picker?

Do the Telerik DateInput, DatePicker, DateTimePicker, TimePicker support the DateTimeOffset type?

Answer

The Telerik date and time inputs and pickers can work with a DateTimeOffset type and with the DateTime types. They can also be nullable.

When the Value is of type DateTimeOffset the Telerik components will use its .DateTime field, which matches to the local time, just like with a "simple" DateTime object.

For the DatePicker component, see the Notes below

Sample of how the Telerik Date-Time inputs work with a DateTimeOffset

@if(TheValue != null)
{
    <p>UTC: @TheValue.UtcDateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>Local: @TheValue.LocalDateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>DateTime (used by Telerik components): @TheValue.DateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>Offset (hours): @TheValue.Offset.Hours</p>
}

<TelerikDateInput @bind-Value="@TheValue" Format="F" Width="400px" />

<br /><br />

<TelerikDateTimePicker @bind-Value="@TheValue" Format="F" Width="400px" />

@code{
    DateTimeOffset TheValue { get; set; }

    protected override void OnInitialized()
    {
        // this is where you set the desired time zone and offset
        // You can add the necessary business logic here or in separate fields
        TheValue = new DateTimeOffset(DateTime.Now, new TimeSpan(3, 0 , 0));

        base.OnInitialized();
    }
}

Notes

It is up to the application logic to initialize that field with the suitable offset according to the user settings, current timezone or other business logic. UI for choosing a time zone and offsets, if needed, is also up to the application and is not offered as part of the Telerik Date and Time inputs and pickers.

You can find some examples of working with DateTime and DateTimeOffset objects in the following articles from MSDN:

TelerikDatePicker

The TelerikDatePicker component has no time portion and thus using time offsets is not relevant to such UI. Thus, it requires a DateTime field. It sets the time to 00:00 hours when choosing a date from it, and you must take that into account when calculating the offset and DateTimeOffset object, even when usung the .Date or .DateTime field of the DateTimeOffset object.

The example below shows how you can use the ValueChanged event of the TelerikDatePicker to apply the time portion so that the offset does not alter the dates. While this prevents you from using two-way binding (@bind-Value), it will still update the view-model at the same time. You can, of course, use any other suitable logic for your scenario (including creating a separate DateTime field in the view-model).

DatePicker with DateTimeOffset - one way to account for the time difference

@if (DateEffective != null)
{
    <p>UTC: @DateEffective.UtcDateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>Local: @DateEffective.LocalDateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>DateTime (used by Telerik components): @DateEffective.DateTime.ToString("dd MMM yyyy, HH:mm:ss")</p>
    <p>Offset (hours): @DateEffective.Offset.Hours</p>
}

<TelerikDatePicker Value="@DateEffective.Date" ValueChanged="@((DateTime d) => UpdateDateTimeOffsetField(d))" Format="d" />

@code{
    DateTimeOffset DateEffective { get; set; }

    void UpdateDateTimeOffsetField(DateTime currDate)
    {
        // Take the current (existing) time portion to add it to the 00:00 hours the date picker will provide
        DateTime currDateWithTime = currDate
            .AddHours(DateEffective.DateTime.Hour)
            .AddMinutes(DateEffective.DateTime.Minute)
            .AddSeconds(DateEffective.DateTime.Second);
        // re-instantiate the DateTimeOffset with the proper time so the offset does not change the date
        DateEffective = new DateTimeOffset(currDateWithTime);
    }

    protected override void OnInitialized()
    {
        DateEffective = new DateTimeOffset(DateTime.Now, new TimeSpan(3, 0, 0));
        base.OnInitialized();
    }
}
In this article
Not finding the help you need? Improve this article