EditorFor只能输入时间，不能设置24小时格式

Question

我正在尝试不同的东西，比如不同的 DataFormatString 甚至不同的控件来使它使用 24 格式，但它保持 AM/PM 格式，如何使其成为 24hs 格式？

编辑： 经过更多搜索后，我意识到同样的代码向某些人显示了 24 小时格式，因此我可以重新表述为：在我的 PC 中可以将什么配置为 AM/PM？我已经将 web.config 中的语言环境更改为 24 小时语言环境，但结果是一样的。我的区域设置也是 24 小时制。

查看：

<div class="col-md-2">
    Horario teórico Desde
    @Html.EditorFor(model => model.HorarioTeoricoDesde, new { htmlAttributes = new { @class = "form-control form-control-sm" } })
    @Html.ValidationMessageFor(model => model.HorarioTeoricoDesde, "", new { @class = "text-danger" })
</div>

视图模型：

[Display(Name = "Horario Teorico Desde")]
[Required(ErrorMessage = "El Horario Teorico Desde es Requerido")]
[DataType(DataType.Time)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
public DateTime? HorarioTeoricoDesde { get; set; }

我的区域设置是 24 小时，西班牙语。这是我的 web.config：

  <system.web>
    <globalization culture="es-AR" uiCulture="es-AR" />

这是我的看法：

谢谢！！

Answer 1

当您使用DataType.Time 时，输入的类型为time。

输入类型time 是 HTML5 中的新内容。这种类型的支持仍然很差。即使您看到 HH:MM AM/PM 格式的时间（24 版本（目前正在开发中）），在后端它仍然以 24 小时格式工作，您可以尝试使用一些基本的 javascript 来查看。

示例：使用bootstrap-timepicker。

ViewModel：-

public class Time24ViewModel
{
    [DataType(DataType.Time)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime? HorarioTeoricoDesde { get; set; }

    [Display(Name = "Horario Teorico Desde")]
    [Required(ErrorMessage = "El Horario Teorico Desde es Requerido")]
    public string HorarioTeoricoDesdeStr
    {
        get
        {
            return HorarioTeoricoDesde.HasValue ? HorarioTeoricoDesde.Value.ToString("HH:mm") : "";
        }
        set
        {
            if (!string.IsNullOrWhiteSpace(value))
            {
                var time = TimeSpan.Parse(value);
                HorarioTeoricoDesde = new DateTime(time.Ticks);

            }
        }
    }
}

控制器：-

public class TimeController : Controller
{
    // GET: Time
    public ActionResult Time24()
    {
        var model = new Time24ViewModel
        {
            HorarioTeoricoDesde = DateTime.Now
        };
        return View(model);
    }
    [HttpPost]
    public ActionResult Time24(Time24ViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }
        return View(model);
    }
}

查看：-

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css" rel="stylesheet" />

@using (Html.BeginForm("Time24", "Time", FormMethod.Post)) { 
<div class="col-md-2">
    Horario teórico Desde
    @Html.EditorFor(model => model.HorarioTeoricoDesdeStr, new { htmlAttributes = new { @class = "form-control form-control-sm" } })
    @Html.ValidationMessageFor(model => model.HorarioTeoricoDesdeStr, "", new { @class = "text-danger" })
</div>
<div class="col-md-2">
    <input type="submit" class="btn btn-dark" value="Submit"/>
</div>
}

<script>
    $('#HorarioTeoricoDesdeStr').timepicker({
        showMeridian: false
    });
</script>

（已测试）

Answer 2

当您使用[DataType(DataType.Time)] 时，EditorFor 方法会呈现time 类型的输入。
根据documentation，此输入以浏览器区域设置对应的格式显示时间。
在内部，输入的value仍然是24小时格式，是不是纯粹是时间的显示方式。

例如：

<input type="time" value="23:13" class="text-box single-line" data-val="true" id="HorarioTeoricoDesde" name="HorarioTeoricoDesde">

在 Firefox 中的结果为英文：

如果你想覆盖它，this question 有一些答案。

---

旧答案，在某些情况下有效，但原因错误：
如果属性的类型是DateTime，则需要使用此

[DataType(DataType.DateTime)]

而不是

[DataType(DataType.Time)]

另一方面，如果您只需要时间部分，您可以考虑使用TimeSpan 而不是DateTime，但这取决于您的项目。

Answer 3

更改本地不会（！）帮助 -> 关键是它在不同的默认语言环境（客户端）中提供不同的输出。
例如：

    en_SS: 12:00 AM
    fr_BL: 00:00
    ps_AF: 0:00
    es_CO: 12:00 a.m.

所以你可以试试

@item.Date.ToString("0:HH:mm")

或

要向模型添加属性，请添加以下代码：

public string ReturnDateForDisplay
{
    get
    {
       return this.ReturnDate.ToString("0:HH:mm");
    }
}

然后在您的 PartialView 中：

@Html.EditorFor(model => model.ReturnDateForDisplay)

要在 create view 中进行更改，您所要做的就是在 html 助手调用中应用您想要的格式，即。

 @Html.TextBoxFor(m => m.YOUR_INPUT, "{0:HH:mm}")

编辑
以获得您想要的结果（显示 plceholder 和验证）：

使用带有 htmlAttributes 参数的 TextBoxFor() 重载。此参数应该是一个匿名对象，其中包含您希望分配给输入的所有属性。
例如，如果要设置占位符和类属性：

@Html.TextBoxFor( model => model.HorarioTeoricoDesde, "{0:HH:mm}", new { 
       @class = "form-control datecontrol", type = "date" })

其他可能的解决方案：ASP.Net Forum
附加信息：
首选方法是对所有潜在问题使用通用格式，然后是客户端（您的 Web UI） 可以在将值发送到后端/API 之前正确格式化该值。 对于日期和日期时间，请使用 ISO 8601 格式并将接受的变量类型设置为后端的字符串。

时间值将被列为，例如，13:24 (HH:mm)。首选有几个原因：

• 日期格式不会因格式而异。
• 字符串的值部分没有被错误解析。
• 客户端和服务器之间不会出现UTC/偏移问题。
• ISO 格式字符串是可排序的。