ASP.NET 核心力量时间跨度数据类型为 24 小时输入格式

Question

无论我做什么，我都无法让我的输入在一段时间内显示为 24 小时格式

public class Horario
{
public int Id { get; set; }
[Required]        
[DataType(DataType.Time)]
[Display(Name = "Início")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{HH:mm}")]
public TimeSpan Inicio { get; set; }
[Required]
[DataType(DataType.Time)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{HH:mm}")]
public TimeSpan Fim { get; set; }
}

出于某种原因，无论我在格式字符串上写什么，它都会使用 AM/PM 将其呈现为 12h

<div class="card card-body">
<div class="form-group col-3">
<label asp-for="Horario.Inicio" class="control-label"></label>
<input asp-for="Horario.Inicio" class="form-control" />
<span asp-validation-for="Horario.Inicio" class="text-danger"></span>
</div>
<div class="form-group col-3">
<label asp-for="Horario.Fim" class="control-label"></label>
<input asp-for="Horario.Fim" class="form-control" />
<span asp-validation-for="Horario.Fim" class="text-danger"></span>
</div>
</div>

Answer 1

当您在输入上使用asp-for并且支持属性是TimeSpan时，Razor 会将其呈现为带有type="time"的输入。"time"输入类型通常呈现为浏览器控件，并且该浏览器控件将被本地化。基础值是 24 小时格式(如果不是，它实际上甚至不起作用，因为它必须是 ISO)，但如果设备的文化是 12 小时，那么这就是它的显示方式。没有办法解决这个问题，因为它是一个浏览器控件。

如果您真的不希望它以这种方式显示，那么您唯一的选择就是通过以下方式使用常规的"文本"输入类型：

<input asp-for="Horario.Inicio" type="text" class="form-control" />

然后，它将只是文本(没有浏览器控件)，并且将显示提供给输入的直线值。但是，您将丢失任何内置验证，用户输入时间当然不会那么容易。他们可能会犯错误并输入无效的值。您可以通过JS添加自己的验证规则，甚至可以创建自己的自定义JS输入，但这完全取决于您。

Answer 2

所以要解决这个问题，这就是我使用的

在后端

#region Properties
[Required]
[BindProperty]
[RegularExpression("^(?:[01]?[0-9]|2[0-3]):[0-5][0-9]$", ErrorMessage = "Insira uma hora no formato HH:MM")]
public string Inicio { get; set; }
[Required]
[BindProperty]
[RegularExpression("^(?:[01]?[0-9]|2[0-3]):[0-5][0-9]$", ErrorMessage = "Insira uma hora no formato HH:MM")]
public string Fim { get; set; }
[BindProperty]
public Horario Horario { get; set; }
#endregion

#region Handlers
public void OnGet()
{
}
public async Task<IActionResult> OnPost()
{
TimeSpan inicio;
if (!TimeSpan.TryParse(Inicio, out inicio))
{
ModelState.AddModelError("", "Hora de Início inválida.");
}
TimeSpan fim;
if (!TimeSpan.TryParse(Fim, out fim))
{
ModelState.AddModelError("", "Hora de Fim inválida.");
}
if (!ModelState.IsValid)
{
_toastNotification.AddErrorToastMessage("Dados inválidos.");
return Page();
}

Horario.Inicio = inicio;
Horario.Fim = fim;
_horarioService.Add(Horario);
try
{
await _horarioService.SaveChangesAsync();
}
catch(DbUpdateException e)
{
//This either returns an error string, or null if it can’t handle that error    
var error = e;
if (error != null)
{
// Log Error and notify user 
_logger.LogError($@"Falha ao criar Horário para o UAP {Horario.Uap}n Erro: {e.InnerException}");
ModelState.AddModelError(string.Empty, $"O horário {Horario.Inicio}-{Horario.Fim} {Horario.Uap} já existe.");                    
_toastNotification.AddWarningToastMessage($"O horário {Horario.Inicio}-{Horario.Fim} {Horario.Uap} já existe.");
return Page(); //return the error string
}
throw; //couldn’t handle that error, so rethrow
}
// Notify user action was successful and log information
_toastNotification.AddSuccessToastMessage("Horário adicionado.");
_logger.LogInformation($@"Adicionado Horário {Horario.Inicio}-{Horario.Fim} {Horario.Uap}. Data: {DateTime.Now.ToString("dd-MM-yyyy hh:mm")}");
return RedirectToPage("Index");
}
#endregion 

在前端

<div class="card card-body">
<div class="form-group col-3">
<div class="input-group mb-3">
<div class="input-group-prepend date">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-clock"></i></span>
</div>
<input type="text" class="form-control" id='Inicio' asp-for="Inicio" />
</div>
<span asp-validation-for="Inicio" class="text-danger"></span>
</div>
<div class="form-group col-3">
<div class="input-group mb-3">
<div class="input-group-prepend date">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-clock"></i></span>
</div>
<input type="text" class="form-control" id='Fim' asp-for="Fim" />
</div>
<span asp-validation-for="Fim" class="text-danger"></span>
</div>
</div>

和 IM 使用引导日期时间选择器

@section Scripts{
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/lib/moment.js/moment.js"></script>
<script src="~/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="~/lib/limonte-sweetalert2/sweetalert2.all.js"></script>
<script>
function OnSubmit() {
$form = $('#form');
if ($form.valid()) {
$(".submit-overlay").fadeIn();
$form.find(':submit').attr('disabled', true).html('<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> A processar...');
}
}
$(function () {
$('#Inicio').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
next: "fa fa-arrow-right",
previous: "fa fa-arrow-left",
},
format: 'HH:mm'
});
$('#Fim').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
next: "fa fa-arrow-right",
previous: "fa fa-arrow-left",
},
format: 'HH:mm'
});
});
</script>

这解决了浏览器的验证和任何文化问题，并为用户提供了体面的 UI。