Question

我是mvc4的新手。我想使用Jquery在mvc4中添加时间。

我正在关注本教程http://weareoutman.github.io/clockpicker/

预约模式

[DataType(DataType. DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true)]
[Display(Name = "TimeOfDrAvailablity")]
public DateTime TimeOfDrAvailablity { get; set; }

[Required]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd-mm-yyyy}", ApplyFormatInEditMode = true)]
public System.DateTime Date { get; set; }

创建视图

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

<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
    <input type="text" class="form-control" value="13:14">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

但我想使用这样的东西

<div class="form-group">
    @Html.EditorFor(model => model.TimeOfDrAvailablity, new { @class = " clockpicker", type = "date" })
</div>

脚本

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true, minDate: -20, maxDate: "+1M +10D" });
            $('.clockpicker').clockpicker();
       });
    </script>
}

在我的布局中

<!--clockpicker -->
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap-theme.css")
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap.css")
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap.min.css")

<!--clockpicker -->
@Scripts.Render("~/Areas/Backend/clockpicker/js/bootstrap.js")
@Scripts.Render("~/Areas/Backend/clockpicker/js/highlight.min.js")
@Scripts.Render("~/Areas/Backend/clockpicker/js/html5shiv.js")
@Scripts.Render("~/Areas/Backend/clockpicker/js/jquery.js")
@Scripts.Render("~/Areas/Backend/clockpicker/js/respond.min.js")

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
@RenderSection("scripts", required: false)

Answer 1

这是我的回答可能会帮助他人。

我在@Scripts.Render("~/bundles/jquery")代码中添加了<head>。

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
@RenderSection("scripts", required: false)

<body>。

3.另外删除dublicate jquery.js文件。

4.last但非常重要 Jquery文件订单 .i.e jquery.js应首先加载，然后加载jquery-ui.js。

如何使用JQuery在MVC4中添加时间？

1 个答案: