Use Blazor to make a simple online timestamp conversion tool

Use Blazor to make a simple online timestamp conversion tool

Timestamp conversion, the key is two-way binding `@bind-Value`, just paste the source code

Last updated 2/27/2022 11:20 PM
沙漠尽头的狼
4 min read
Category
Blazor
Tags
.NET C# Blazor .NET 7 Timestamp conversion

Timestamp Conversion

沙漠尽头的狼 - 2022-02-27 23:20:12 - dotnet-version Visual Studio 2022 Dotnet9软件技术交流 Gitee GitHub GitHub stars

Timestamp conversion, the key is two-way binding @bind-Value, so just paste the source code here.

TimestampTool.razor

@page "/timestamp"
@using BlazorComponent.I18n
@layout PublicLayout

<PageTitle>@T("TimestampToolTitle")</PageTitle>

<h2 style="margin-bottom: 10px; margin-top: 10px; text-align: center;">@T("TimestampToolDesc")</h2>

<MRow>
    @T("TimestampToolDateNow") @DateToTimestamp(DateTime.Now, TimestampKind.Seconds)
</MRow>
<MRow>
    <MTextField Label="@T("TimestampToolTimestamp")" TValue="long" @bind-Value="@_timestamp1"/>
    <MSelect @bind-Value="@_kindValue1"
             Label="@T("TimestampToolTimestampKind")"
             Items="@_items"
             ItemText="u => u.Label"
             ItemValue="u => u.Value"
             Class="mx-3"
             MenuProps="props => props.OffsetY = true">
    </MSelect>
    <MButton OnClick="@Convert1">@T("TimestampToolConvert")</MButton>
    <MTextField Label="@T("TimestampToolBeijingTime")"
                TValue="string" @bind-Value="@_datetime1"
                Class="ml-3"/>
</MRow>
<MRow>
    <MTextField Label="@T("TimestampToolBeijingTime")" TValue="string" @bind-Value="@_datetime2"/>
    <MButton Class="mx-3" OnClick="@Convert2">@T("TimestampToolConvert")</MButton>
    <MTextField Label="@T("TimestampToolTimestamp")" TValue="long" @bind-Value="@_timestamp2"/>
    <MSelect @bind-Value="@_kindValue2"
             Label="@T("TimestampToolTimestampKind")"
             Items="@_items"
             ItemText="u => u.Label"
             ItemValue="u => u.Value"
             MenuProps="props => props.OffsetY = true"
             Class="ml-3">
    </MSelect>
</MRow>

<MarkdownComponent
    LocalPostFilePath="wwwroot/2022/02/2022-02-27_03.md"
    SourceCodeUrl="https://github.com/dotnet9/dotnet9.com/blob/develop/src/Dotnet9.Tools.Web/Pages/Public/TimeTools/TimestampTool.razor"/>

@code
{
    [Inject]
    private I18n I18N { get; set; } = default!;

    private DateTime _currentDatetime;
    private long _timestamp1;
    private long _timestamp2;
    private string? _datetime1;
    private string? _datetime2;
    private TimestampKind _kindValue1;
    private TimestampKind _kindValue2;

    private readonly List<TimestampItem> _items = new();

    protected override Task OnInitializedAsync()
    {
        _items.Add(new TimestampItem(T("TimestampToolKindSeconds")!, TimestampKind.Seconds));
        _items.Add(new TimestampItem(T("TimestampToolKindMilliseconds")!, TimestampKind.Milliseconds));
        _currentDatetime = DateTime.Now;
        _timestamp1 = _timestamp2 = DateToTimestamp(_currentDatetime, TimestampKind.Seconds);
        _datetime1 = _datetime2 = _currentDatetime.ToString("yyyy-MM-dd HH:mm:ss");
        return base.OnInitializedAsync();
    }

    private void Convert1()
    {
        _datetime1 = TimestampToDate(_timestamp1, _kindValue1).ToString(_kindValue1 == TimestampKind.Seconds ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd HH:mm:ss.fff");
    }

    private void Convert2()
    {
        try
        {
            _timestamp2 = DateToTimestamp(DateTime.Parse(_datetime2), _kindValue2);
        }
        catch
        {
        }
    }

    private static long DateToTimestamp(DateTime date, TimestampKind kind)
    {
        try
        {
            var point = new DateTime(1970, 1, 1);
            var time = date.Subtract(point);

            return (long)(kind == TimestampKind.Seconds ? time.TotalSeconds : time.TotalMilliseconds);
        }
        catch
        {
            return default;
        }
    }


    private static DateTime TimestampToDate(long timestamp, TimestampKind kind)
    {
        try
        {
            var point = new DateTime(1970, 1, 1);
            var time = kind == TimestampKind.Seconds ? point.AddSeconds(timestamp) : point.AddMilliseconds(timestamp);

            return time;
        }
        catch
        {
            return default;
        }
    }

    public string? T(string key)
    {
        return I18N.LanguageMap.GetValueOrDefault(key);
    }

    enum TimestampKind
    {
        Seconds,
        Milliseconds
    }

    class TimestampItem
    {
        public string Label { get; }
        public TimestampKind Value { get; }

        public TimestampItem(string label, TimestampKind value)
        {
            Label = label;
            Value = value;
        }
    }
}

Dotnet9 Toolbox will continue to add new free, open-source, online tools. Stars are welcome. If you have any requests, I will consider adding them. Repository address: Dotnet9.Tools. You can submit an issue, leave a message on the website, or contact via WeChat public account (dotnet9), etc.

Tool source code: TimestampTool

Introduction article: Using Blazor to build a simple online timestamp conversion tool

Online demo: https://tool.dotnet9.com/timestamp

Keep Exploring

Related Reading

More Articles
Same category / Same tag 11/6/2024

Why My Blog Website Returned to Blazor

The development of the blog website has gone through many hardships, with nearly 10 versions including MVC, Vue, Go, etc. Now it has returned to Blazor and adopted static SSR, resulting in a significant speed increase and successful launch.

Continue Reading
Same category / Same tag 2/29/2024

Data Display Can Also Be Done Like This in Winform

In the process of developing Winform, data display functionality is often required. Previously, the gridcontrol control was commonly used. Today, through an example, I would like to introduce how to use the table component from Ant Design Blazor for data display in a Winform Blazor Hybrid application.

Continue Reading
Same category / Same tag 2/29/2024

Can the Winform interface also look good?

A few days ago, I introduced using Blazor Hybrid in Winform, and mentioned that with the Blazor UI, our Winform programs can be designed to look better. Next, I will illustrate with an example of drawing in Winform Blazor Hybrid, hoping it helps you.

Continue Reading