如何让JQuery DatePicker图标紧邻TextBox输入框？ASP.NET MVC求助

嘿，我来帮你搞定这个DatePicker图标不显示的问题！结合你的代码来看，大概率是组件配置混用或者依赖资源没到位导致的，下面我分几种情况给你解决方案：

先搞清楚你用的是哪种DatePicker组件 #

你页面里用了Bootstrap的form-control、btn这类样式类，但代码里的配置像是jQuery UI DatePicker的，这很容易混淆——两者的参数和用法差异很大，先明确你要使用的组件：

情况1：你想用Bootstrap DatePicker（更贴合你的页面样式） #

如果是这个情况，你的配置参数错用成jQuery UI的了，按下面步骤改：

1. 确认依赖资源都已引入
   确保页面里加载了这些资源（不要漏）：

   • jQuery
   • Bootstrap的CSS和JS
   • Bootstrap DatePicker的CSS和JS
   • Font Awesome的CSS

2. 修改HTML结构（用Bootstrap的input-group来放图标）
   把原来的输入框包装成Bootstrap的输入组，方便图标对齐：

   <div class="input-group date" id="datepicker-container">
       <input class="form-control" id="min" type="text" name="start" placeholder="Select a day of the week:" autocomplete="off" style="width:160px" readonly="readonly" />
       <div class="input-group-addon">
           <i class="fa fa-calendar"></i>
       </div>
   </div>
   

3. 修改JS配置（用Bootstrap DatePicker的正确参数）
   替换原来的DatePicker代码：

   $("#datepicker-container").datepicker({
       autoclose: true, // 这个参数Bootstrap DatePicker是支持的
       firstDay: 1,
       format: "yyyy-mm-dd", // Bootstrap用format而非dateFormat
       startDate: new Date(ThisMonday), // 用startDate而非minDate
       endDate: new Date(sunday), // 用endDate而非maxDate
       todayHighlight: true,
       icons: {
           date: 'fa fa-calendar' // 指定用Font Awesome图标
       }
   }).datepicker("setDate", new Date(STDate));
   
   // 绑定选中后的回调
   $("#datepicker-container").on("changeDate", function() {
       table.draw();
   });
   

情况2：你确实想用jQuery UI DatePicker #

如果是这种情况，问题出在buttonText不支持HTML，而且有些参数jQuery UI根本没有，按下面改：

1. 确认依赖资源
   必须加载：

   • jQuery
   • jQuery UI的CSS和JS
   • Font Awesome的CSS

2. 移除无效参数
   jQuery UI DatePicker没有autoclose和autoHide，删掉这两个参数，换成jQuery UI的写法：

   $("#min").datepicker({
       firstDay: 1,
       dateFormat: "yy-mm-dd",
       minDate: new Date(ThisMonday),
       maxDate: new Date(sunday),
       showOn: "focus", // 先去掉both，我们手动加按钮
       onSelect: function () { 
           table.draw();
           $(this).datepicker("hide"); // 手动关闭替代autoclose
       },
       changeMonth: true,
       changeYear: true
   }).datepicker("setDate", new Date(STDate));
   

3. 手动添加图标按钮并绑定事件
   因为jQuery UI的buttonText不能渲染HTML，所以我们自己加一个按钮：

   <span style="display:flex; align-items:center;">
       <input class="form-control" id="min" type="text" name="start" placeholder="Select a day of the week:" autocomplete="off" style="width:160px" readonly="readonly" />
       <button type="button" id="date-btn" class="btn btn-default" style="margin-left:4px;">
           <i class="fa fa-calendar"></i>
       </button>
   </span>
   

   然后给按钮绑定点击事件：

   $("#date-btn").click(function() {
       $("#min").datepicker("show");
   });
   

最后检查几个常见坑 #

• 不要混用不同DatePicker的参数（比如把Bootstrap的autoclose用到jQuery UI上）
• 确保所有依赖的CSS/JS文件都正确加载，没有404错误
• 如果用Font Awesome，确认版本和类名匹配（比如新版用fa-solid fa-calendar，旧版用fa fa-calendar）

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