ASP.NET MVC 5中Bootstrap DateTimePicker无法触发问题求助

• 1. 检查必要依赖是否引入 #

你当前的视图Scripts区域仅引入了jqueryval验证包，未引入日期选择器运行必须的依赖：jQuery、Bootstrap基础库、Bootstrap DateTimePicker的JS和CSS文件。
打开App_Start文件夹下的BundleConfig.cs，确认已添加如下资源配置：

// 脚本资源
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/bootstrap-datetimepicker.js"));
// 样式资源
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/bootstrap-datetimepicker.css",
          "~/Content/site.css"));

如果项目还没有安装Bootstrap DateTimePicker，可通过NuGet搜索Bootstrap.DateTimePicker安装对应包。

• 2. 修复重复ID问题 #

HTML中ID属性全局唯一，你给两个日期选择容器都设置了id="datetimepicker"，会导致选择器匹配失效，修改为不同ID：

<!-- 开始日期容器 -->
<div class="input-group" id="datetimepicker_start">
@Html.EditorFor(model => model.startdate, new { htmlAttributes = new { @class = "datetimepicker form-control" } })
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

<!-- 结束日期容器 -->
<div class="input-group" id="datetimepicker_end">
@Html.EditorFor(model => model.enddate, new { htmlAttributes = new { @class = "datetimepicker form-control" } })
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

• 3. 修复模型日期格式错误 #

你当前的DisplayFormat中使用小写mm代表月份，实际小写mm是分钟的格式符，大写MM才对应月份，修改模型代码：

[DisplayName("Begin Date")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime startdate { get; set; }

[DisplayName("End Date")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime enddate { get; set; }

• 4. 添加日期选择器初始化JS #

在视图的Scripts区域添加初始化代码，注意如果母版页_Layout.cshtml已经引入了jQuery、Bootstrap资源，无需重复引入：

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@* 若母版页未引入以下资源则取消注释 *@
@* @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css") *@
<script type="text/javascript">
$(function () {
    // 初始化两个日期选择器
    $('#datetimepicker_start').datetimepicker({
        format: 'YYYY-MM-DD'
    });
    $('#datetimepicker_end').datetimepicker({
        format: 'YYYY-MM-DD'
    });
    // 可选：添加日期联动逻辑，限制结束日期不能早于开始日期
    $("#datetimepicker_start").on("dp.change", function (e) {
        $('#datetimepicker_end').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker_end").on("dp.change", function (e) {
        $('#datetimepicker_start').data("DateTimePicker").maxDate(e.date);
    });
});
</script>
}

• 5. 前端错误排查 #

如果修改后仍无响应，按F12打开浏览器开发者工具，切换到Console标签页，根据报错信息定位问题：

• 提示$ is not defined：说明jQuery未正确引入
• 提示datetimepicker is not a function：说明DateTimePicker的JS文件未正确引入
• 日历图标显示异常：说明DateTimePicker的CSS文件未正确引入

内容的提问来源于stack exchange，提问作者sdfsaf asfsf