ASP.NET Core 将输入的时间跨度数据类型强制为 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; }

    }

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

        <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" 的输入。 “时间”输入类型通常呈现为浏览器控件，并且该浏览器控件将被本地化。基本值是 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>

我正在使用引导日期时间选择器

@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。