Как получить текущий DateTime от клиента?

Question

Я хочу показать текущий клиент DateTime с компонентом Blazor.

В какое время будет представлен следующий код?

<div>@DateTime.Now</div>

Я думаю, это будет время сервера. Как узнать время клиентской ОС?

Answer 1

Первое решение:

---

с использованием Blazored.Localisation пакет nuget

в консоли диспетчера пакетов

Install-Package Blazored.Localisation

в Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazoredLocalisation(); // This adds the IBrowserDateTimeProvider to the DI container
}

и на ваш взгляд

@inject Blazored.Localisation.Services.IBrowserDateTimeProvider browserDateTimeProvider
@page "/"

<p>The current local time is: <strong>@currentLocalTime</strong></p>

@code {

    string currentLocalTime = "";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) // Remove the firstRender check if you want the current local time displayed to continuously update.
        {   // Leave the above firstRender check in place to ensure that the call to StateHasChanged() does not trigger an endless update loop.
            var browserDateTime = await browserDateTimeProvider.GetInstance();
            currentLocalTime = browserDateTime.Now.ToString();
            StateHasChanged();
        }
    }
}

---

Второе решение:

---

как @Ibrahem Uwk сказал, добавить функцию в отдельный JavaScript файл и включить его в _Host.cs html или в любой файл, но не .razor файл

код в JavaScript файл

function getClientDate() {
var d = new Date();
document.getElementById("demo").innerHTML = d;
}

и затем вызовите функцию в вашем представлении

@page "/"
@inject IJSRuntime jsRuntime


...

<p id="demo"></p>

...

@code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
    // call your JS here
    JSRuntime.InvokeVoidAsync("getClientDate");
    }
 }
}

Answer 2

U может использовать Js следующим образом, например:

<p id="demo"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

И это будет выполняться на стороне пользователя и получит местное время для пользователя

Answer 3

Лучший и самый надежный способ получить часовой пояс у клиента - попросить его об этом. Обычно вы предоставляете своему пользователю страницу «профиля», где он может обновлять такие вещи, как часовые пояса, валюта и форматирование. Я бы предложил это как более надежное решение.

Answer 4

Для получения клиентского времени вы должны использовать TimeZone или toLocaleDateString (). Вы можете использовать код ниже

<div>@DateTime.Now.toLocaleDateString()</div>

или

<div>@new Date().toLocaleDateString()</div>

Это может решить вашу проблему.