Bootstrap DateTimePicker v3无法生效求助：仅显示空文本框

我看了你的代码，发现几个关键问题导致DateTimePicker无法正常工作，咱们一步步来修复：

1. 移除重复脚本引用，保证加载顺序正确 #

你的母版页里手动引入了jquery-3.0.0.min.js和bootstrap.min.js，但同时在ScriptManager中又添加了jquery和bootstrap的官方引用，这会导致脚本重复加载，引发冲突，直接影响组件运行。

修复方案：
删掉母版页<head>里手动引入的jQuery和Bootstrap脚本，保留ScriptManager的引用，同时确保moment.js和datetimepicker脚本在jQuery、Bootstrap之后加载：

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Care and Cure Hospital</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- 移除手动引入的jquery和bootstrap，避免重复加载 -->
<script type="text/javascript" src="Scripts/moment.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="Content/bootstrap-datetimepicker.min.css" />
</head>

2. 添加DateTimePicker核心初始化脚本 #

你目前只有点击图标让输入框获取焦点的代码，但缺少初始化DateTimePicker的核心逻辑——这是组件不弹出选择器的最主要原因。

修复方案：
在预约页面的脚本区域添加初始化代码，确保DOM加载完成后执行：

<script type="text/javascript">
// 等待DOM完全加载后执行初始化
$(document).ready(function() {
    // 初始化DateTimePicker组件
    $('#datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm', // 可根据业务需求调整日期格式
        minDate: moment(), // 可选：禁止选择过去的日期
        ignoreReadonly: true // 可选：如果输入框设为readonly，允许通过图标触发选择器
    });

    // 保留原有的点击触发逻辑
    $('.open-datetimepicker').click(function (event) {
        event.preventDefault();
        $('#datetimepicker').focus();
    });
});
</script>

3. 检查Font Awesome依赖（可选） #

你用了<span class="fa fa-calendar open-datetimepicker"></span>作为日历图标，如果页面没引入Font Awesome，图标会显示异常。可以在母版页<head>里添加引用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

4. 验证依赖版本兼容性 #

确保你的组件版本互相兼容：

• Bootstrap DateTimePicker v3 支持jQuery 3.x和Bootstrap 3.x，这点没问题，但要保证moment.js的版本和DateTimePicker匹配，避免版本冲突

按照以上步骤修改后，DateTimePicker应该就能正常弹出日期选择器了。

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