如何解决将小时、分钟、秒添加到输入字段并使用 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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。