BlazorLocalTime 1.0.4

BlazorLocalTime

BlazorLocalTime provides functionality to convert DateTime values to the user's local time zone in Blazor applications.

Demo

arika0093.github.io/BlazorLocalTime/

Installation

Install BlazorLocalTime from NuGet:

dotnet add package BlazorLocalTime

Next, register the service in your Program.cs:

builder.Services.AddBlazorLocalTimeService();

Finally, add the following component to Routes.razor (or MainLayout.razor, etc.):

@using BlazorLocalTime
<BlazorLocalTimeProvider />

Using as a Component

To simply display a local time as text, use the LocalTimeText component:

<LocalTimeText Value="@DateTime.UtcNow" Format="yyyy-MM-dd HH:mm:ss" />

Alternatively, you can use the LocalTime component to receive the converted value in the child content:

<LocalTime Value="@DateTime.UtcNow" Context="dt">
    @dt.ToString("yyyy-MM-dd HH:mm:ss")
</LocalTime>

If you want to use TimeZoneInfo, you can use the LocalTimeZone component:

<LocalTimeZone Context="tz">
    <p>Current Time Zone: @tz.DisplayName</p>
</LocalTimeZone>

For input forms, it is common to display values in local time and save them as UTC.
You can easily create such forms using the LocalTimeForm component:

<LocalTimeForm @bind-Value="Dt" Context="dtf">
    <InputDate Type="InputDateType.DateTimeLocal" @bind-Value="dtf.Value" />
</LocalTimeForm>

@code {
    private DateTime Dt { get; set; } = DateTime.UtcNow;
}

Input forms also support separate date and time inputs:

<LocalTimeForm @bind-Value="Dt" Context="dtf">
    <InputDate Type="InputDateType.Date" @bind-Value="dtf.Date" />
    <InputDate Type="InputDateType.Time" @bind-Value="dtf.Time" />
</LocalTimeForm>

@code {
    private DateTime Dt { get; set; } = DateTime.UtcNow;
}

Using with UI Libraries

The LocalTimeForm component can be used with various UI libraries to create forms that handle local time input. Below are examples using MudBlazor, Fluent UI, and Ant Design Blazor components.

MudBlazor

<LocalTimeForm @bind-Value="Dt" Context="dtf">
    <MudDatePicker Label="Date" @bind-Date="dtf.Value" ShowToolbar="false" />
    <MudTimePicker Label="Time" @bind-Time="dtf.TimeSpan" ShowToolbar="false" />
</LocalTimeForm>

@code {
    private DateTime? Dt { get; set; } = DateTime.UtcNow;
}

Fluent UI

<LocalTimeForm @bind-Value="Dt" Context="dtf">
    <FluentDatePicker Label="Date" @bind-Value="dtf.Value" />
    <FluentTimePicker Label="Time" @bind-Value="dtf.Value" />
</LocalTimeForm>
    
@code {
    private DateTime? Dt { get; set; } = DateTime.UtcNow;
}

Ant Design Blazor

<LocalTimeForm @bind-Value="Dt" Context="dtf">
    <DatePicker TValue="DateTime?" @bind-Value="dtf.Value" ShowTime="@true" />
    @* Alternatively, you can use separate date and time pickers *@
    <DatePicker TValue="DateOnly?" @bind-Value="dtf.Date" />
    <TimePicker TValue="TimeOnly?" @bind-Value="dtf.Time" />
</LocalTimeForm>

@code {
    private DateTime? Dt { get; set; } = DateTime.UtcNow;
}

Using as a Service

You can also use ILocalTimeService to convert values in your code:

@inject ILocalTimeService LocalTimeService
@code {
    private void ButtonClicked()
    {
        var localNow = LocalTimeService.ToLocalTime(DateTime.UtcNow);
        // or shorthand
        // var localNow = LocalTimeService.Now;
    }
}

During the initial rendering (OnInitialized), the user's local time zone may not be available yet, so conversion can fail. In such cases, you can use ILocalTimeService.LocalTimeZoneChanged to wait until the local time zone becomes available.

@implements IDisposable
@inject ILocalTimeService LocalTimeService
@code {
    protected override void OnInitialized()
    {
        LocalTimeService.LocalTimeZoneChanged += OnLocalTimeZoneChanged;
    }

    public void Dispose()
    {
        LocalTimeService.LocalTimeZoneChanged -= OnLocalTimeZoneChanged;
    }

    private void OnLocalTimeZoneChanged(object? sender, EventArgs e)
    {
        if(LocalTimeService.IsTimeZoneInfoAvailable)
        {
            // can use LocalTimeService.ToLocalTime() now
        }
    }
}

Reference

This article was used as a major reference. I would like to express my gratitude for the reference article.