如何使用jquery或引导在MVC4显示时间 [英] How to display Time in MVC4 using jquery or Bootstrap

问题描述

我的模型

  [数据类型（DataType.Time）
    [DisplayFormat（ApplyFormatInEditMode = TRUE，DataFormatString ={0：HH：MM TT}）]
    [显示（NAME =TimeOfDrAvailablity）]
    公众的System.DateTime TimeOfDrAvailablity {搞定;组; }
 

CREATE VIEW

 ＆LT; P＆GT;
＆LT;输入类=disableTimeRangesExample类型=文字自动完成=关闭＆GT;＆LT; / P＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
 $（函数（）{
            $（'。disableTimeRangesExample'）。timepicker（{
                disableTimeRanges'：[
                    ['凌晨1点，凌晨2点']，
                    [凌晨3点'，'4:01']
                ]
            }）;
        }）;
＆LT; / SCRIPT＆GT;
 

我不知道我在哪里wrong..please提出任何帮助...
I M尝试下面的教程.. http://jonthornton.github.io/jquery-timepicker/
还告诉我如何使用模型添加id和class

 ＆LT; D​​IV CLASS =表单组＆GT;
     @ Html.LabelFor（（型号= GT; model.TimeOfDrAvailablity）
                         新{@class =COL-SM-2控制标签}）
     @ Html.EditorFor（（型号= GT; model.TimeOfDrAvailablity）
                         新{@class =disableTimeRangesExample，键入=日期}）
     @ Html.ValidationMessageFor（型号=＆GT; model.TimeOfDrAvailablity）
 ＆LT; / DIV＆GT;
 

解决方案

您不能应用HTML属性 EditorFor（）在MVC-4（你至少需要MVC- 5.1）。只需使用

  @ Html.EditorFor（M = GT; m.TimeOfDrAvailablity）
 

这将添加键入您=时间属性（因为你已经应用了 [数据类型（DataType.Time）] 属性，然后使用它的 ID 属性附加插件

  $（'＃TimeOfDrAvailablity'）。timepicker（{....
 

边注：由于您使用的是jQuery插件，在 [数据类型（DataType.Time）] 和 [DisplayFormat（ApplyFormatInEditMode = TRUE，DataFormatString ={0：HH：MM TT}）] 因为它们仅用于呈现的浏览器的HTML5时间选择器执行的属性是没有必要的。这可能只是

  @ Html.TextBoxFor（M = GT; m.TimeOfDrAvailablity）
 

在这种情况下，你可以使用添加一个类名

  @ Html.TextBoxFor（M = GT; m.TimeOfDrAvailablity，新{@class =disableTimeRangesExample}）
 

My Model

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

create view

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

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

I Don't know where i am wrong..please suggest any help... i m trying following tutorial..http://jonthornton.github.io/jquery-timepicker/ also tell me how to add id and class using model

  <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>

解决方案

You cannot apply html attributes to EditorFor() in MVC-4 (you need at least MVC-5.1). Just use

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

which will add the type="time" attribute for you (because you have applied the [DataType(DataType.Time)] attribute, and then use its id attribute to attach the plugin

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

Side note: Since you using a jquery plugin, the [DataType(DataType.Time)] and [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")] attributes are not necessary since they are only used to render the browsers HTML5 time picker implementation. It could be just

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

in which case you could add a class name using

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

这篇关于如何使用jquery或引导在MVC4显示时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！