使用jQuery Datepicker实现选日期结合晚数生成日期范围的问题

需求：获取#quantity2输入的入住晚数，当用户选择起始日期后，自动计算结束日期（起始日期 + 入住晚数），并将日期范围格式化为MM/DD/YY - MM/DD/YY的形式输出到#popupDatepicker文本框中。

修改后的完整代码 #

HTML（无需修改）

<p>Pick a Date</p>
<div class="date-picker">
  <div class="div-d-picker">
    <img id="datepicker" src="assets/images/ic_calendar.png" alt="" />
  </div>
  <div class="picked-date">
    <input type="text" id="popupDatepicker" placeholder="20 Jan - 22 Jan" />
  </div>
</div>
<!-- 假设#quantity2为入住晚数输入框 -->
<input type="number" id="quantity2" min="1" value="1" />

jQuery代码

$(function () {
  const $nightsInput = $("#quantity2");
  const $dateInput = $("#popupDatepicker");

  $dateInput.datepicker({
    minDate: 1,
    showButtonPanel: true,
    changeMonth: true,
    // 选择日期后触发逻辑
    onSelect: function(selectedDateStr) {
      // 解析选中的起始日期
      const startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, selectedDateStr);
      // 获取入住晚数，默认1晚
      const nights = parseInt($nightsInput.val()) || 1;
      // 计算结束日期：起始日期 + 入住晚数天数
      const endDate = new Date(startDate);
      endDate.setDate(startDate.getDate() + nights);
      // 格式化日期为指定格式
      const formattedStart = $.datepicker.formatDate("mm/dd/yy", startDate);
      const formattedEnd = $.datepicker.formatDate("mm/dd/yy", endDate);
      // 写入文本框
      $dateInput.val(`${formattedStart} - ${formattedEnd}`);
    }
  });

  // 点击日历图标切换选择器显示状态
  $("#datepicker").click(function (e) {
    const isVisible = $dateInput.datepicker("widget").is(":visible");
    $dateInput.datepicker(isVisible ? "hide" : "show");
  });

  // 可选：修改入住晚数时自动更新已选日期范围
  $nightsInput.on("change", function() {
    const currentVal = $dateInput.val();
    if (currentVal.includes(" - ")) {
      const startDateStr = currentVal.split(" - ")[0];
      const startDate = $.datepicker.parseDate("mm/dd/yy", startDateStr);
      const nights = parseInt($(this).val()) || 1;
      const endDate = new Date(startDate);
      endDate.setDate(startDate.getDate() + nights);
      const formattedEnd = $.datepicker.formatDate("mm/dd/yy", endDate);
      $dateInput.val(`${startDateStr} - ${formattedEnd}`);
    }
  });
});

关键逻辑说明 #

• onSelect回调：jQuery Datepicker核心事件，用户选择日期后立即触发，负责日期计算与格式化。
• 日期解析/格式化：用$.datepicker.parseDate将字符串转为Date对象，$.datepicker.formatDate将Date对象转为指定格式字符串。
• 结束日期计算：通过setDate方法在起始日期基础上叠加入住晚数，得到对应结束日期。
• 晚数更新监听：可选功能，用户修改入住晚数时，若已选日期则自动更新范围。

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