如何解决ASP.NET MVC中JQuery DatePicker图标无法紧邻TextBox的问题？

嘿，我帮你捋捋这个问题～你遇到的DatePicker图标没法和TextBox输入框并排的情况，大概率是样式冲突或者默认生成的按钮布局没适配你的Bootstrap表单样式。下面给你几个实用的解决办法，你可以按需尝试：

办法1：自定义CSS修复默认生成按钮的布局 #

jQuery UI DatePicker在开启showOn: "both"后，会自动生成一个带ui-datepicker-trigger类的按钮。我们可以给这个类加样式，让它和输入框对齐：

/* 让DatePicker触发按钮与输入框并排、垂直居中 */
.ui-datepicker-trigger {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px; /* 可选：给图标和输入框加一点间距 */
    border: none;
    background-color: transparent; /* 去掉默认按钮的背景，只留图标 */
    cursor: pointer;
}

同时，注意你的输入框用了Bootstrap的form-control类，它默认是display: block会占满整行，所以可以给输入框的父容器加display: inline-flex，确保容器内元素能并排：

<div style="display: inline-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" />
</div>

办法2：用Bootstrap Input Group组件规范布局 #

Bootstrap的input-group组件专门用来处理输入框和附属按钮的并排布局，适配性更好，也能和你页面里的其他按钮样式统一：

修改View的HTML结构 #

@using (Html.BeginForm()) {
  <table>
    <thead>
      <tr>
        <th style="padding: 4px; vertical-align:top;">
          <div class="input-group" style="width: 200px;"> <!-- 调整容器宽度适配需求 -->
            <input class="form-control" id="min" type="text" name="start" placeholder="Select a day of the week:" autocomplete="off" readonly="readonly" />
            <!-- DatePicker会自动将触发按钮插入到这里 -->
          </div>
        </th>
        <th style="padding: 4px; vertical-align:top;">
          <input class="btn btn-primary" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnLoad" name="Load" value="Load Week" />
          <input class="btn btn-danger" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnApprove" name="Approve" value="Approve" />
        </th>
      </tr>
    </thead>
  </table>
}

配合CSS调整按钮样式 #

给自动生成的按钮加样式，让它适配Bootstrap的input-group风格：

.ui-datepicker-trigger {
    border-left: none;
    border-radius: 0 0.25rem 0.25rem 0; /* 和Bootstrap输入框的圆角对齐 */
    background-color: #e9ecef; /* 用Bootstrap的默认附属按钮背景色 */
}

办法3：手动添加触发按钮（最可控） #

如果自动生成的按钮不好调，咱们可以手动加一个符合Bootstrap样式的按钮，然后绑定DatePicker的触发事件，这样布局完全由你掌控：

修改View的HTML #

@using (Html.BeginForm()) {
  <table>
    <thead>
      <tr>
        <th style="padding: 4px; vertical-align:top;">
          <div class="input-group" style="width: 200px;">
            <input class="form-control" id="min" type="text" name="start" placeholder="Select a day of the week:" autocomplete="off" readonly="readonly" />
            <button type="button" class="btn btn-outline-secondary" id="date-picker-btn">
              <i class="fa fa-calendar"></i>
            </button>
          </div>
        </th>
        <th style="padding: 4px; vertical-align:top;">
          <input class="btn btn-primary" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnLoad" name="Load" value="Load Week" />
          <input class="btn btn-danger" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnApprove" name="Approve" value="Approve" />
        </th>
      </tr>
    </thead>
  </table>
}

修改jQuery代码 #

去掉自动生成按钮的配置，手动绑定点击事件：

$("#min").datepicker({
  autoHide: true,
  firstDay: 1,
  dateFormat: "yy-mm-dd",
  minDate: new Date(ThisMonday),
  maxDate: new Date(sunday),
  // 移除showOn和buttonText配置
  onSelect: function () { table.draw(); },
  changeMonth: true,
  changeYear: true,
  autoclose: true
}).datepicker("setDate", new Date(STDate));

// 手动绑定按钮触发DatePicker
$("#date-picker-btn").click(function() {
  $("#min").datepicker("show");
});

额外检查点 #

• 确保你已经正确引入了Font Awesome的CSS，不然图标会显示不出来；
• 如果用的是jQuery UI DatePicker，记得引入jQuery UI的CSS，否则按钮的默认样式会混乱；
• 检查是否有其他自定义CSS覆盖了输入框或按钮的display属性，导致布局错乱。

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