Bootstrap DateTimePicker 和现有日期解析问题？

Question

有关版本的信息，使用 Bootstrap 3.0.0（如果我没记错的话内置在新的 MVC 模板中），Bootstrap-datetimejs 4.0.0（https://github.com/Eonasdan/bootstrap-datetimepicker ), 和 ASP.NET MVC 5.

使用 MVC，我呈现了一堆字段，但是这个字段有现有数据（这是在 Chrome 中检查元素时，所以它不是 HTMLHelper 代码）：

<input class="form-control timepicker input-validation-error" data-format="hh:mm PP" 
  data-val="true" data-val-date="The field Start (Time) must be a date." 
  data-val-required="The Start (Time) field is required." 
  id="MaintenanceSundayTimeStart" 
  name="MaintenanceSundayTimeStart" type="text" value="1/1/2000 8:00:00 PM">

生成它的代码：

<div class="col-sm-4">
  <div class="form-group">
    @Html.LabelFor(model => model.MaintenanceSundayTimeStart)
    @Html.TextBoxFor(model => model.MaintenanceSundayTimeStart, 
      new { @data_format = "hh:mm PP", @class = "form-control timepicker" })
  </div>
</div>

当页面加载时，我称之为：

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     format: 'LT'
   });
 });

编辑：尝试过这个：

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     pickDate: false
   });
 });

并根据查看 moment.js 文档将数据格式设置为此，尽管斜杠和冒号不包括在内我假设它们可以被放入（以匹配 1/1 /2000 8:00:00 下午)

data-format="M/D/YYYY H:mm:ss A"

而且它似乎仍然无法解析日期时间。

出于某种原因，当控件呈现时，我在文本框中看到列出了完全不同的时间 (1:00 PM)，这告诉我它可能无法解析出该值。我确实希望渲染只是 hour:minute AM/PM，但我认为我必须绑定到标准 DateTime 对象，对吧？查看源代码，似乎注入了输入验证错误，所以这可能是我提交表单时仅关注文本框的更大问题。

我是不是做错了什么？我知道我想接受一个 "mm/dd/YYYY hh:mm:ss PP" 并将其解析为只解析 "hh:mm PP" 部分。保存时，我真的只关心时间部分（我强制日期为 1/1/2000，因为我根本不关心日期部分）。

编辑：经过多次尝试，我注意到被解析的值（主要是通过转储其他值）是该值似乎将 MM 部分作为小时。输入将是一个完整的日期时间，但我只希望为用户提供要管理的时间组件（我将所有日期强制为 2000 年 1 月 1 日）。在这个阶段，我想如果我能完成那部分，我会很好。

Answer 1

看起来您实际上使用的是另一个不再积极开发的日期时间选择器 https://github.com/tarruda/bootstrap-datetimepicker，我建议切换到您实际链接到的版本。许多这些数据属性看起来与表单验证有关，并且也可能与您正在尝试做的事情发生冲突。我会建议使用 data-val="false" 直到你可以让选择器按预期工作，然后处理任何需要的验证。

Answer 2

如果您使用我的 Datetimepicker v4，您可以通过这样做轻松完成：

$('.timepicker').datetimepicker({
    format: 'LT'
});

不需要额外的 data-。

此外，作为额外奖励，您可以使用 EditorFor 模板来设置文本框。

https://gist.github.com/Eonasdan/1f6bd021319486e23777

Model.cs

using System.ComponentModel.DataAnnotations;
[DataType(DataType.Time)]
public DateTime Updated { get; set; }

Time.cshtml

//This file goes in /Shared/EditorTemplates/Time.cshtml
//You can easily do this for DataType.Date and DataType.DateTime
@{
    var attributes = new Dictionary<string, object>();
    attributes.Add("class", "form-control");
    attributes.Add("type", "datetime");
}
<div class="input-group timepicker col-sm-3 col-md-3" id="@(ViewData.TemplateInfo.HtmlFieldPrefix)-timepicker">
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, attributes)
    <span class="input-group-addon">
        <span class="fa fa-clock-o"></span>
    </span>
</div>

Answer 3

尝试对格式的小时部分使用小写 'h'，例如：

$('.timepicker').each(function () {
  $(this).datetimepicker({
    format: 'format="M/D/YYYY h:mm:ss A"'
  });
});

Bootstrap DateTimePicker 和现有日期解析问题？

Bootstrap DateTimePicker and existing dates parsing issue?

twitter-bootstrap

asp.net-mvc-5

bootstrap-datetimepicker

Model.cs

Time.cshtml