解决jQuery DatePicker点击日期自动跳转到项目根URL的问题

没错，初始状态隐藏的元素确实是导致这个跳转问题的大概率原因！

jQuery DatePicker在初始化时，需要依赖目标元素的可见状态来正确计算弹窗位置、绑定点击事件等逻辑。如果元素一开始是display: none，插件内部的事件绑定可能会出现异常，甚至错误地将日期点击事件关联到页面的锚点行为上，最终触发跳转到带#的根URL。

下面给你几个可行的修复方案，按推荐程度排序：

方案1：延迟初始化，元素显示后再绑定DatePicker #

这是最稳妥的方式，避免在隐藏元素上做插件初始化。比如你是通过某个按钮或交互来显示这个输入框的，就在显示操作完成后再初始化DatePicker（记得加个判断避免重复初始化）：

// 假设你是通过按钮触发显示输入框
$('.trigger-show-date').on('click', function() {
  const $dateInput = $('input[name="date"]');
  // 显示输入框
  $dateInput.show();
  // 检查是否已初始化过datepicker，防止重复绑定
  if (!$dateInput.data('datepicker')) {
    $dateInput.datepicker({
      dateFormat: 'yy-mm-dd'
    });
  }
});

方案2：临时"可见"元素后再初始化 #

如果你必须提前初始化（比如页面加载时就要完成），可以先把元素设置为视觉上不可见但DOM状态可见的样式，初始化完成后再恢复隐藏：

const $dateInput = $('input[name="date"]');
// 临时修改样式，让元素处于DOM可见状态但不影响页面布局
$dateInput.css({
  position: 'absolute',
  left: '-9999px',
  display: 'block'
});
// 初始化DatePicker
$dateInput.datepicker({
  dateFormat: 'yy-mm-dd'
});
// 恢复原有的隐藏状态
$dateInput.css({
  position: '',
  left: '',
  display: 'none'
});

方案3：手动触发DatePicker弹窗 #

如果已经提前完成了初始化，在显示元素时手动调用插件的show方法，确保事件绑定正常生效：

$('.trigger-show-date').on('click', function() {
  const $dateInput = $('input[name="date"]');
  $dateInput.show().datepicker('show');
});

优先试试方案1，这是最符合插件设计逻辑的做法，基本能解决这类隐藏元素初始化带来的异常问题。

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