如何将Bootstrap3 DateTimePicker与ASP.NET Core模型值绑定？

嗨，我来帮你搞定这个DateTimePicker初始化失效的问题！这种情况大多是脚本加载顺序不对、没等DOM就绪，或者依赖没引全导致的，下面给你一步步的解决方案：

第一步：确认依赖引入顺序（关键！） #

Bootstrap DateTimePicker依赖jQuery和Bootstrap，必须保证加载顺序正确：先jQuery，再Bootstrap，最后DateTimePicker的CSS和JS。在你的布局文件（比如_Layout.cshtml）里按这个顺序引入：

<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- DateTimePicker CSS -->
<link rel="stylesheet" href="~/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />

<!-- jQuery -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DateTimePicker JS -->
<script src="~/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

第二步：正确初始化控件（在Razor脚本区块中） #

ASP.NET Core的Razor页面里，脚本最好放在@section Scripts中，因为布局文件通常会把这个区块放在页面底部（jQuery之后），避免出现"$未定义"的错误。

你的HTML部分可以保留原来的代码（asp-for会自动生成正确的name和id，和控件外层的datetimepicker1对应）：

<div class='input-group date' id='datetimepicker1'>
    <input asp-for="Observation.ObservationDateTime" type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

然后在页面底部添加初始化脚本：

@section Scripts {
    <script type="text/javascript">
        // 等待DOM加载完成再执行初始化
        $(function () {
            // 初始化DateTimePicker，可根据需求添加配置项
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss', // 匹配模型的DateTime格式
                locale: 'zh-CN' // 可选，启用中文本地化
            });

            // 编辑页面时，把模型已有的值绑定到控件
            var initialDateTime = '@Model.Observation.ObservationDateTime?.ToString("yyyy-MM-dd HH:mm:ss")';
            if (initialDateTime !== '') {
                $('#datetimepicker1').data('DateTimePicker').date(initialDateTime);
            }
        });
    </script>
}

常见问题排查 #

如果还是失效，打开浏览器控制台（F12）看看有没有报错：

• 如果提示$ is not defined：说明jQuery没加载或者加载顺序不对
• 如果提示datetimepicker is not a function：说明DateTimePicker的JS没加载，或者加载在Bootstrap之前
• 检查控件的iddatetimepicker1有没有拼写错误，确保选择器和HTML中的id一致
• 确认模型的ObservationDateTime属性类型是DateTime或者DateTime?（可空），避免类型不匹配

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