BlazorLocalTime 2.1.0

BlazorLocalTime

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

Demo Page

What's this?

The following code contains a bug. Can you spot it?

<p>@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</p>

The issue is that this displays the current time on the server, not the user's local time. The time is formatted according to the Blazor host server's time zone, which may not match the user's time zone.

This bug occurs when the Blazor host server's time zone ≠ user's time zone. Because of this, it's an easy bug to overlook during development.

A similar issue arises with date/time input fields. In short, you can't determine "which time zone" the entered time refers to.

<InputDate Type="InputDateType.DateTimeLocal" @bind-Value="dt" />
@code {
    private DateTime dt { get; set; }
    private void SaveToDatabase()
    {
        // Cannot correctly convert to UTC (uses server's time zone)
        var utc = dt?.ToUniversalTime();
    }
}

You can use BlazorLocalTime to solve these problems.

Setup

Installation

Install BlazorLocalTime from NuGet:

dotnet add package BlazorLocalTime

And register the service in your Program.cs:

builder.Services.AddBlazorLocalTime();

That's it! Now you can use the components.

Skills

This repository publishes an Agent Skills compatible skill at skills/blazor-local-time/. Install it with the skills CLI:

npx skills add arika0093/BlazorLocalTime --skill blazor-local-time

Using as a Component

Displaying Local Time

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

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

For example, this will render as:

<time datetime="2025-06-30T17:45:27.4610000Z">2025-07-01 02:45:27+09:00</time>

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 the user's local time zone is not yet available when loading, the LocalTime component will not display anything. As a fallback, you can use OnLoading to specify content to show until the local time zone is obtained.

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

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

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

Input Forms

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;
}

and more usage examples can be found in the Demo.

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.

@if(LocalTimeService.IsTimeZoneInfoAvailable)
{
    <p>Current Time is @LocalTimeService.Now</p>
}

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

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

    private void OnLocalTimeZoneChanged(object? sender, TimeZoneChangedEventArgs e)
    {
        // e.PreviousTimeZone -> Before Time Zone
        // e.CurrentTimeZone  -> After Time Zone
        StateHasChanged();
    }
}

Overriding Time Zone

You can programmatically override the browser's detected time zone using OverrideTimeZoneInfo. This is useful for testing different time zones or allowing users to select their preferred time zone:

<select @onchange="OnTimeZoneChanged">
    <option value="">-- Use Browser Time Zone --</option>
    @foreach (var tz in TimeZoneInfo.GetSystemTimeZones())
    {
        <option value="@tz.Id">@tz.DisplayName</option>
    }
</select>

@inject ILocalTimeService LocalTimeService
@code {
    private void OnTimeZoneChanged(ChangeEventArgs e)
    {
        var timeZoneId = e.Value?.ToString();
        LocalTimeService.OverrideTimeZoneInfo = !string.IsNullOrEmpty(timeZoneId)
            ? TimeZoneInfo.FindSystemTimeZoneById(timeZoneId)
            : null;
    }
}

API Reference

For detailed API documentation, see API.md.

Reference

This article was used as a major reference.