BlazorLocalTime

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #go #android #deep-learning #windows #kubernetes #vue #mcp #openai #open-source

BlazorLocalTime

(★ 15)

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

BlazorLocalTime Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# BlazorLocalTime

[![NuGet Version](https://img.shields.io/nuget/v/BlazorLocalTime?style=flat-square&logo=NuGet&color=0080CC)](https://www.nuget.org/packages/BlazorLocalTime/) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/arika0093/BlazorLocalTime/test.yaml?branch=main&label=Test&style=flat-square) ![GitHub last commit (branch)](https://img.shields.io/github/last-commit/arika0093/BlazorLocalTime?style=flat-square)

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

[Demo Page](https://arika0093.github.io/BlazorLocalTime/)

## What's this?
The following code contains a bug. Can you spot it?

```razor
<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.

```razor
<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](https://www.nuget.org/packages/BlazorLocalTime):

```bash
dotnet add package BlazorLocalTime
```

And register the service in your `Program.cs`:

```csharp
builder.Services.AddBlazorLocalTime();
```

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

### Skills

This repository publishes an [Agent Skills](https://agentskills.io) compatible skill at [`skills/blazor-local-time/`](skills/blazor-local-time/). Install it with the [skills CLI](https://skills.sh):

```bash
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:

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

For example, this will render as:
```html
<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:

```razor
<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.

```razor
<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:

```razor
<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:

```razor
<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:

```razor
<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](https://arika0093.github.io/BlazorLocalTime/).

## Using as a Service

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

```razor
@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.

```razor
@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();
    }
}
```

> [!NOTE]
> If you are not using any components such as `LocalTimeText`, you need to place `<BlazorLocalTimeProvider />` in the root component to call JavaScript.

## 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:

```razor
<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](skills/blazor-local-time/references/API.md).

## Reference

[This article](https://www.meziantou.net/convert-datetime-to-user-s-time-zone-with-server-side-blazor-time-provider.htm) was used as a major reference.

BlazorLocalTime

BlazorLocalTime Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

BlazorLocalTime

BlazorLocalTime Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README