Question

我的模特

   [DataType(DataType.Time)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
    [Display(Name = "TimeOfDrAvailablity")]
    public System.DateTime TimeOfDrAvailablity { get; set; }

创建视图

  <p>
<input class="disableTimeRangesExample" type="text" autocomplete="off"></p>

 <script type="text/javascript">
 $(function () {
            $('.disableTimeRangesExample').timepicker({
                'disableTimeRanges': [
                    ['1am', '2am'],
                    ['3am', '4:01am']
                ]
            });
        });
</script>

我不知道我哪里错了..请建议任何帮助...... 我正在尝试关注教程.. http://jonthornton.github.io/jquery-timepicker/ 还告诉我如何使用模型

添加id和class

  <div class="form-group">
     @Html.LabelFor((model => model.TimeOfDrAvailablity), 
                         new { @class = "col-sm-2 control-label" })
     @Html.EditorFor((model => model.TimeOfDrAvailablity), 
                         new { @class = "disableTimeRangesExample", type = "date" })
     @Html.ValidationMessageFor(model => model.TimeOfDrAvailablity)
 </div>

Answer 1

我相信你需要使用

@Html.EditorFor((model => model.TimeOfDrAvailablity), 
                         new { @class = "disableTimeRangesExample", type = "date" })

以便将类和类型应用于input。

Answer 2

您无法在MVC-4中将html属性应用于EditorFor()（您至少需要MVC-5.1）。只需使用

@Html.EditorFor(m => m.TimeOfDrAvailablity)

将为您添加type="time"属性（因为您已应用[DataType(DataType.Time)]属性，然后使用其id属性附加插件

$('#TimeOfDrAvailablity').timepicker({ ....

附注：由于您使用的是jquery插件，因此[DataType(DataType.Time)]和[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]属性不是必需的，因为它们仅用于呈现浏览器HTML5时间选择器实现。它可能只是

@Html.TextBoxFor(m => m.TimeOfDrAvailablity)

在这种情况下，您可以使用

添加类名

@Html.TextBoxFor(m => m.TimeOfDrAvailablity, new { @class = "disableTimeRangesExample" })

如何使用jquery或Bootstrap在MVC4中显示时间

2 个答案: