jQuery datepicker点击日历图标触发错误输入框如何解决

问题原因 #

你当前代码的问题出在日历图标的触发逻辑上：调用$(".datepicker").datepicker("show")会选中页面内所有带datepicker类的输入框触发日期选择器，默认会聚焦到最后一个匹配的输入框，所以会出现点击开始日期图标弹出结束日期选择器的问题。

修复方案 #

方案1：DOM相对定位（无需修改HTML结构） #

直接替换原有.btn_calendar的点击事件代码即可，通过相对位置找到当前图标对应的输入框：

// 替换原来的$(".btn_calendar").click那段代码
$(".btn_calendar").click(function() {
  // 定位当前点击的图标前方紧邻的.datepicker输入框触发
  $(this).prev(".datepicker").datepicker("show");
});

方案2：ID关联（适配性更强，不受DOM结构变动影响） #

先修改HTML部分，给输入框加专属ID，给图标加对应关联属性：

<td class="w40">
        <span class="date">
            <input type="text" id="startDate" class="input_date datepicker">
             <span class="icon btn_calendar" data-target="#startDate"></span>
             ~
             <input type="text" id="endDate" class="input_date datepicker">
             <span class="icon btn_calendar" data-target="#endDate"></span>
         </span>
      </td>

再修改点击事件逻辑：

$(".btn_calendar").click(function() {
  const targetInput = $(this).data("target");
  $(targetInput).datepicker("show");
});

内容的提问来源于stack exchange，提问作者안제원