ASP.NET Core 8 MVC中Bootstrap DateTimePicker点击图标不显示日历求助

问题描述 #

ASP.NET Core 8 MVC应用中，原本集成Bootstrap DateTimePicker(v4.17.47)与Font Awesome(v4.7.0)功能正常，引入bootstrap-icons库后出现异常：

• 点击日历图标无法弹出日历
• 点击日期文本框自动填入今日日期，但日历仍不显示
• 删除bootstrap-icons库后问题依旧存在
• 浏览器F12调试无报错，新建应用重新集成功能可正常运行

排查方向与解决建议 #

• 检查DOM元素与类名冲突
  bootstrap-icons和Font Awesome可能存在类名重叠，即使删除bootstrap-icons，浏览器缓存或DOM残留可能导致图标类名被覆盖。强制刷新页面（Ctrl+Shift+R）清除缓存，检查日历图标的类名是否从fa fa-calendar被意外替换为bi bi-calendar，导致DateTimePicker绑定的触发元素失效。

• 验证脚本加载顺序
  确保脚本按依赖顺序加载：

  1. jQuery (jquery-3.6.0.js)
  2. Bootstrap (bootstrap.min.js)
  3. moment.js (moment.min.js)
  4. Bootstrap DateTimePicker (bootstrap-datetimepicker.min.js)
     错误的加载顺序会导致组件隐性初始化失败，即使控制台无报错。

• 确认DateTimePicker初始化配置
  初始化代码中需明确指定Font Awesome图标类，避免与bootstrap-icons冲突：

  $('#datetimepicker').datetimepicker({
    icons: {
      time: "fa fa-clock-o",
      date: "fa fa-calendar",
      up: "fa fa-arrow-up",
      down: "fa fa-arrow-down"
    }
  });
  

• 排查样式污染
  检查.bootstrap-datetimepicker-widget类的样式，确认是否被自定义样式或bootstrap-icons覆盖：

  • 查看z-index值，避免弹窗被其他元素遮挡
  • 确认display属性未被设置为none

• 清理静态文件缓存
  ASP.NET Core可能缓存静态文件，即使删除bootstrap-icons库，旧文件仍可能被引用：

  • 删除wwwroot/lib/bootstrap-icons目录后重新构建项目
  • 临时禁用静态文件缓存测试：

    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
            ctx.Context.Response.Headers.Append("Expires", "0");
        }
    });
    

• 对比新建项目差异
  将现有项目的_Layout.cshtml、初始化代码、静态文件引用与正常新建项目逐一对比，排查是否存在第三方脚本、自定义jQuery事件等干扰因素。

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