1

有关版本的信息，请使用 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），这告诉我它可能无法解析出该值。我确实希望渲染仅是小时：分钟 AM/PM，但我认为我必须绑定到标准 DateTime 对象，对吧？查看源代码，看起来输入验证错误被注入了，所以这可能是我提交表单时只关注文本框的更大问题。

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

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

4

3 回答 3

2

如果您使用的是我的 Datetimepicker 的 v4，您可以通过以下方式轻松完成：

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

不需要额外的data-。

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

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

模型.cs

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

时间.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>
于 2015-02-25T15:07:14.717 回答
0

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

于 2015-02-24T18:11:14.587 回答
0

尝试在格式的小时部分使用小写的“h”，例如：

$('.timepicker').each(function () {
  $(this).datetimepicker({
    format: 'format="M/D/YYYY h:mm:ss A"'
  });
});
于 2015-10-31T09:49:21.017 回答