如何使用Bootstrap从datepicker获取日期并在其他div中展示

前置检查 #

首先确保页面已经正确引入对应的依赖：jQuery库 + 你使用的datepicker插件（jQuery UI Datepicker / Bootstrap Datepicker等）

问题原因 #

• 按钮元素没有默认的value属性存储选中的日期，原生change事件无法监听到日期选择操作
• 原代码中给展示div赋值的逻辑错误，未正确将选中日期写入到div的内容区域

修复代码 #

适用于jQuery UI Datepicker #

$(function() {
  $("#date").datepicker({
    // 用datepicker内置的选中回调获取日期
    onSelect: function(selectedDate) {
      // 直接将日期写入展示div
      $("#show-date").text(selectedDate);
    }
  });
});

适用于Bootstrap Datepicker #

$(function() {
  $("#date").datepicker();
  // 监听Bootstrap Datepicker专属的日期变更事件
  $("#date").on("changeDate", function(e) {
    // 可根据需求调整日期格式化规则
    const showDate = e.date.toLocaleDateString('zh-CN');
    $("#show-date").text(showDate);
  });
});

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