jQuery Datepicker点击按钮无响应问题求助

嘿，别担心，刚接触jQuery和前端编程遇到这种小问题太正常啦～我来帮你捋捋问题出在哪儿，以及怎么解决！

问题根源 #

jQuery UI的Datepicker组件默认是为<input>输入框设计的，它会自动给输入框添加点击弹出日历的逻辑，但直接把它绑定在<button>按钮上时，组件不会自动触发弹出行为——因为按钮不是它默认支持的载体类型。

修复方案 #

我们可以用一个隐藏的<input>元素来关联Datepicker，然后通过按钮的点击事件手动触发日历弹出。这样既保留了按钮的交互，又能正常使用Datepicker的功能。

修改后的完整代码 #

HTML部分

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- 隐藏的输入框，用来承载Datepicker（用户看不到它） -->
<input type="text" id="datepicker" style="display: none;">
<!-- 点击这个按钮触发日历弹出 -->
<button id="date-btn" class="btn btn-light">Jump to a specific date</button>

JavaScript部分

$(function() {
  // 先给隐藏的输入框初始化Datepicker
  $("#datepicker").datepicker({
    // 可选：添加日期选择后的回调，比如拿到选中的日期做后续操作
    onSelect: function(selectedDate) {
      console.log("你选中的日期是：" + selectedDate);
      // 这里可以写你选中日期后的逻辑，比如跳转页面之类的
    }
  });

  // 给按钮绑定点击事件，手动触发Datepicker弹出
  $("#date-btn").on("click", function() {
    $("#datepicker").datepicker("show");
  });
});

额外说明 #

• 隐藏的<input>是用来让Datepicker有一个“依附”的元素，因为它需要存储选中的日期值，同时也是组件的触发载体。
• 如果需要在选中日期后执行操作（比如跳转），可以用onSelect回调函数，像代码里注释的那样，拿到选中的日期后写你的业务逻辑。

这样修改后，点击按钮就能正常弹出Datepicker啦😉

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