如何在 MVC 4 中设置时间选择器答案

【问题标题】：How to set Time-picker in MVC 4如何在 MVC 4 中设置时间选择器
【发布时间】：2016-06-24 09:42:36
【问题描述】：

我需要创建一个仅包含时间字段的视图。任何人都可以帮助我如何在 MVC 4 剃须刀中创建 Timepicker。

这是我的代码：

型号

public TimeSpan TIME_OUT { get; set; }

查看

<div class="form-group">
     @Html.LabelFor(model => model.TIME_OUT, "End Time", htmlAttributes: new { @class = "col-xs-4 col-sm-offset-1 col-sm-4" })
     <div class='input-group date col-xs-8 col-sm-6' id='timeout'>
          @Html.TextBoxFor(model => model.TIME_OUT, new { @class = "form-control" })
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-time">
              </span>
          </span>
     </div>
</div>

JavaScript：

$(function () {
    $('#timeout').datetimepicker({
        format: 'LT'
    });
 });

这是我的代码的结果：

但是当我点击时间图标时，它并没有显示我想要的结果

这就是我想在我的时间选择器中做的事情

【问题讨论】：

所以问题是这种格式仍然显示日期方面，而不仅仅是时间？
我已经测试了你的代码，它确实对我有用，那么究竟你的问题是什么？
您能否详细说明您正在使用哪个 datetimepicker 插件。
@freedomn-m - bootstrap-datepicker.js, bootstrap-datetimepicker.css 这些是我在我的应用程序中使用的 js 和 css。
@BviLLe_Kid - 在我看来，我在我的模型中使用了数据类型 TimeSpan。我想显示一个时间选择器。我将编辑我的问题，只是为了向您展示我想要做什么。

标签： javascript jquery asp.net-mvc-4 jquery-ui bootstrap-timepicker

【解决方案1】：

您可以使用引导时间选择器，并通过此 Jquery 进行设置

$("#YourId").timepicker("setTime", '');

参考这个 Bootstrap Timpicker 示例，

https://eonasdan.github.io/bootstrap-datetimepicker/

responsive-bootstrap-3-timepicker

http://tarruda.github.io/bootstrap-datetimepicker/

【讨论】：

或者 OP 可以使用 1000 个其他 better 时间选择器中的任何一个......但问题没有提到想要添加不兼容的引导程序添加到 jquery-ui 的过多开销在 mvc 4.
OP 提到标签中的 Bootstrap-timepicker 已被我删除以获得更好的答案
奇怪 - 你为什么要删除标签？无论哪种方式，它都应该在问题文本中，而不是依赖标签。
Bootstrap-timepicker 不是出现在列表中的知名标签，我认为是这样，我在某处错了吗？
鉴于预编辑中的其他标签过多，很可能选择它是因为它具有“时间选择器”而不是与问题相关。您的编辑已获批准，因此其他人同意该编辑（我会这样做），所以没有错 - 需要等待 OP 回答我关于他们正在使用的确切日期时间选择器的问题。