Use Blazor to create a simple online timestamp conversion tool

Use Blazor to create a simple online timestamp conversion tool

The key point of timestamp conversion is to bind '@bind-Value' in both directions. Just post the source code.

最后更新 2/27/2022 11:20 PM
沙漠尽头的狼
预计阅读 3 分钟
分类
Blazor
标签
.NET C# Blazor .NET 7 Timestamp conversion

Timestamp conversion

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

时间戳转换,关键点在于双向绑定@bind-Value,就简单贴源码吧

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工具箱会不断添加新的免费、开源、在线工具,欢迎 star 支持,有什么需求我会考虑加上,仓库地址:Dotnet9.Tools,可提交 issue网站留言、微信公众号(dotnet9)联系等等。

本工具源码:TimestampTool

介绍文章:使用 Blazor 做个简单的时间戳在线转换工具

在线演示地址:https://tool.dotnet9.com/timestamp

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 11/6/2024

Why is my blog site back in Blazor?

The blog website has gone through hardships in development. It has tried nearly 10 versions such as MVC, Vue, and Go. Now it has returned to Blazor and adopts static SSR. The speed has skyrocketed and it has been successfully launched.

继续阅读
同分类 / 同标签 2/29/2024

Data display can also be done in Winform

In the process of developing winform, data display functions are often needed. I have been using the gridcontrol before. Today, I want to use an example to introduce to you how to use the table component in ant design blazor hybrid to display data.

继续阅读
同分类 / 同标签 2/29/2024

Can Winform's interface become better?

A few days ago, I introduced to you the use of blazor hybrid in winform, and I also said that with blazor's ui, our winform program design can be more beautiful. Next, I want to use an example of drawing in winform blazor hybrid to illustrate it, hoping to be helpful to you.

继续阅读