Question

我尝试在我的mvc项目中使用实现bootstrap v3 datetimepicker但它不起作用。下面是我的编辑模板。

@model DateTime？
@ Html.TextBox（＆＃34;＆＃34;，Model.HasValue？Model.Value.ToString（＆＃34; d＆＃34;）：String.Empty）

$(function() {
    // target only the input in this editor template
    $('#datepicker').datetimepicker();
}); </script>

我在_layout.chtml上添加了bootstrap datetimepicker脚本，但似乎无法正常运行

<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

这是我的观点

@ Html.LabelFor（model =＆gt; model.EndDate，new {@class =＆＃34; control-label col-md-2＆＃34;}） @ Html.EditorFor（model =＆gt; model.EndDate）
            @Html.ValidationMessageFor(model => model.EndDate)
        </div>
    </div>

如果我将其设置为

，它只会作为普通的datetimepicker出现

    [DataType(DataType.Date)]
    public DateTime EndDate { get; set; }

Answer 1

您不必同时包含min.js和.js删除一个。

为CSS添加〜/ Content / bootstrap-datepicker.css

@Html.LabelFor(model => model.EndDate)
@Html.TextBoxFor(model => model.EndDate, new { @class = "form-control datepicker", placeholder = "Palce holder of your choice" })
@Html.ValidationMessageFor(model => model.EndDate)

初始化后，其余代码将起作用

$(function() {
  // target only the input in this editor template
  $('#datepicker').datetimepicker();
});

Answer 2

迄今为止有很多bootstrap datetimepickers。所以，你必须指定你正在使用的正确的datetimepicker。如果是这个 - http://eonasdan.github.io/bootstrap-datetimepicker/

然后，包括

包括moment.js文件 - http://momentjs.com/downloads/moment.js
摆脱其中一个datetimepicker javascript文件（〜/ Scripts / bootstrap-datetimepicker.js或〜/ Scripts / bootstrap-datetimepicker.min.js）
包括datetimepicker css文件。
在您的视图文件中添加此脚本。

$（function（）{$（＆＃39;＃ID_of_the_Input＆＃39;）。datetimepicker（）;}）;

Answer 3

使用

$(function() {
    // target only the input in this editor template
    $('#EndDate').datetimepicker();
});

mvc bootstrap datepicker与编辑器模板不工作

3 个答案: