ASP.NET MVC中点击文本框JQuery Datepicker不显示问题求助

我帮你排查几个最常见的原因，咱们一步步来修复：

1. 先引入jQuery核心库，再加载jQuery UI #

jQuery UI完全依赖jQuery核心库，你贴的代码里只加了jquery-ui-1.12.1.min.js，却没引入基础的jQuery文件——这是最容易踩的坑！

你需要调整引入顺序，先加jQuery，再加载jQuery UI：

<script src="~/Scripts/jquery-3.6.0.min.js"></script> <!-- 替换成你项目里实际的jQuery版本 -->
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

顺序绝对不能搞反，不然jQuery UI找不到依赖的jQuery对象，根本无法正常工作。

2. 别忘了引入jQuery UI的样式文件 #

Datepicker的弹窗样式需要jQuery UI的CSS支持，你现在只加了Bootstrap的样式，就算逻辑正常，也可能因为样式缺失导致弹窗不渲染（或者渲染得乱七八糟）。

补上这行样式引入：

<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />

要确保这个CSS文件确实在你项目的Content目录下，路径要对应上。

3. 必须给文本框绑定Datepicker初始化脚本 #

你得明确告诉浏览器：这个文本框要触发日期选择器。如果没有初始化代码，它就是个普通文本框，不会有任何特殊行为。

假设你的文本框ID是datePickerInput，在页面底部（或者$(document).ready()函数里）加这段脚本：

$(document).ready(function() {
    $("#datePickerInput").datepicker({
        // 可选：自定义日期格式，比如中文常用的格式
        dateFormat: "yy-mm-dd",
        changeMonth: true, // 允许切换月份
        changeYear: true   // 允许切换年份
    });
});

如果你的文本框是用HtmlHelper生成的（比如@Html.TextBoxFor(m => m.Date, new { @class = "date-picker" })），也可以用类选择器批量初始化：

$(document).ready(function() {
    $(".date-picker").datepicker();
});

4. 检查文件路径是否正确 #

打开浏览器开发者工具（按F12），切换到Console标签，看看有没有404错误（提示找不到js/css文件）。如果有，说明你的路径写错了——比如~/Scripts对应的实际物理路径是否正确，或者如果用了BundleConfig，应该用@Scripts.Render("~/bundles/jquery")和@Scripts.Render("~/bundles/jqueryui")来引入，避免手动写路径出错。

5. 排查Bootstrap和jQuery UI的冲突 #

如果你的项目同时引入了Bootstrap的日期组件（比如bootstrap-datepicker），会和jQuery UI的Datepicker产生冲突。解决方法二选一：

• 去掉其中一个组件，只保留需要的日期选择器
• 重命名jQuery UI的组件，避免命名冲突：

// 重命名jQuery UI的datepicker，避免和Bootstrap冲突
$.widget.bridge('uidatepicker', $.ui.datepicker);
// 初始化时用重命名后的方法
$("#datePickerInput").uidatepicker();

最后，把这些修改整合到你的视图里，大概是这样的结构：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- 先引入jQuery核心 -->
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <!-- 再引入jQuery UI -->
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <!-- 引入jQuery UI样式 -->
    <link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <title>Plane_Schedule</title>
</head>
<body>
    <section class="registersection">
        <div class="container-fluid">
            <div class="row">
                <div class="signupForm">
                    <!-- 你的文本框示例 -->
                    <input type="text" id="datePickerInput" placeholder="选择日期" />
                </div>
            </div>
        </div>
    </section>

    <!-- 初始化脚本放在页面底部，确保DOM加载完成 -->
    <script>
        $(document).ready(function() {
            $("#datePickerInput").datepicker({
                dateFormat: "yy-mm-dd"
            });
        });
    </script>
</body>
</html>

按照这个步骤检查修改，应该就能解决Datepicker不显示的问题啦！

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