点击按钮弹出jQuery/bootstrap日期选择器并将选中日期赋值给变量

没问题呀！刚接触jQuery难免会有点摸不着头绪，我来帮你搞定这个需求～ 首先要注意的是：jQuery本身没有自带datepicker组件，这个是jQuery UI里的功能，所以我们需要先补充引入jQuery UI的依赖文件，再实现弹窗选日期的逻辑。

完整实现代码 #

<!-- 按钮和隐藏输入框 -->
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'> Snapshot </button>
<input type="hidden" id="button_snapshot" />

<!-- 引入依赖：先jQuery，再jQuery UI的JS和CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
// 定义全局变量存储选中的日期（也可以根据需求改成局部变量）
let selectedDate;

function snapshot_btn() {
  // 创建临时div作为datepicker的容器，用dialog做成弹窗
  $("<div>").dialog({
    modal: true, // 模态弹窗，点击外部无法关闭
    title: "请选择日期",
    open: function() {
      // 在弹窗内初始化datepicker
      $(this).datepicker({
        dateFormat: "yy-mm-dd", // 设置日期格式，可自定义（比如"mm/dd/yy"）
        onSelect: function(dateText) {
          // 选中日期后赋值给变量
          selectedDate = dateText;
          // 同时把日期同步到隐藏输入框（如果不需要可以删掉这行）
          $("#button_snapshot").val(dateText);
          // 关闭弹窗
          $(this).dialog("close");
          // 可选：打印结果确认
          console.log("你选中的日期是：", selectedDate);
        }
      });
    },
    close: function() {
      // 弹窗关闭后移除临时div，避免页面残留元素
      $(this).remove();
    }
  });
}
</script>

关键部分说明 #

• 依赖补充：必须先引入jQuery，再引入jQuery UI的JS和CSS，不然datepicker和dialog功能都用不了。
• 弹窗与datepicker结合：我们通过创建临时div，用jQuery UI的dialog把它变成模态弹窗，然后在弹窗打开时初始化datepicker。
• 日期存储：用selectedDate全局变量存储选中的日期，你也可以根据业务需求改成局部变量或者存入其他地方。
• 日期格式：dateFormat参数可以自定义日期显示格式，比如改成"mm/dd/yy"就是月/日/年的格式，具体可按需调整。
• 清理临时元素：弹窗关闭时移除临时div，避免页面上留下多余的DOM元素。

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