将小时、分钟、秒添加到输入字段并使用 js 显示为 hh:mm:ss am/pm 并在保存到 Blazor 中的数据库之前转换为时间跨度

问题描述

向输入字段添加小时、分钟和秒，显示 hh:mm:ss.fffffff am/pm，将其保存到 Blazor 中 timespan hh:mm:ss.fffffff 的数据库中。在这里，我使用了 input type="number" 插入小时、分钟和秒。还有一个上午/下午的下拉菜单。

我想将其设为 timespan 格式并将其保存到 Blazor 服务器应用程序中的数据库中。如果我使用它，我会尝试通过 javascript 并使用该函数连接小时、分钟和秒。

如何获取 Fromtime 和 ToTime 并转换为 Timespan 格式并发送到数据库？

我的模型类包含：

    public class Model
        {
            public TimeSpan FromTime { get; set; }
            public TimeSpan ToTime { get; set; }
        }

times.razor：

    <div class="row">
        <div class="col" id="time">
            <label for="quantity">From Time:</label>
            <span>Hour:
                <input class="e-input e-field" 
                       type="number" 
                       id="hoursid" 
                       name="quHour" 
                       min="1" 
                       max="24">
            </span>
            <span>Minutes:
                <input class="e-input e-field" 
                       type="number" 
                       id="minutesid" 
                       name="quMin" 
                       min="0" 
                       max="60">
            </span>
            <span>Seconds:
                <input class="e-input e-field" 
                       type="number" 
                       id="secondid" 
                       name="quSec" 
                       min="0" 
                       max="60">
            </span>
            <span>
                <select class="form-control" id="selectampm">
                    <option value="0" selected="selected">AM</option>
                    <option value="1">PM</option>
                </select>
            </span>
        </div>
    </div>
    <div class="row">
        <div class="col" id="time">
            <label for="quantity">To Time:</label>
            <span>Hour:
                <input class="e-input e-field" 
                       type="number" 
                       id="hoursid" 
                       name="quHour" 
                       min="1" 
                       max="24">
            </span>
            <span>Minutes:
                <input class="e-input e-field" 
                       type="number" 
                       id="minutesid" 
                       name="quMin" 
                       min="0" 
                       max="60">
            </span>
            <span>Seconds:
                <input class="e-input e-field" 
                       type="number" 
                       id="secondid" 
                       name="quSec" 
                       min="0" 
                       max="60">
            </span>
            <span>
                <select class="form-control" id="selectampm">
                    <option value="0" selected="selected">AM</option>
                    <option value="1">PM</option>
                </select>
            </span>
        </div>
    </div>

    @code {
        public async void action()
        {  
            string timevalue=await JSRuntime.InvokeAsync<string>("myFunction");
        }
    }

Times.js：

function myyFunction() {
    var hours = document.getElementById("#hoursid");
    var minutes = document.getElementById("#minutesid");
    var seconds = document.getElementById("#secondid");
    var ampm = document.getElementById("#selectampm"); 
    var timefromtextBox = hours + ":" + minutes + ":" + seconds + " " + ampm;
}

有人可以帮我吗？

解决方法

您不需要 JavaScript 来执行此操作。这是您可以在 Blazor 中执行此操作的一种方法的简单示例。这仅用于演示目的 - 显然您希望标记您的 HTML 输入并包括某种类型的验证。这只是为了向您表明完全没有必要为此使用 JavaScript。

<div>
    <input type="number" @bind="hours">
    <input type="number" @bind="minutes">
    <input type="number" @bind="seconds">
</div>

@code{
    private int hours;
    private int minutes;
    private int seconds;

    private TimeSpan CreateTimeSpan() => new TimeSpan(hours,minutes,seconds);
}