使用Pikaday Js时如何基于已选日期设置另一日期框最大为15天后

API 探路者

2026-9-29

问题根因

初始化another_day实例时，today输入框还没有选中值，直接读取today.value拿到的是空值，计算逻辑完全无效
Pikaday实例的value属性是日期格式的字符串，不能直接和数字做加法计算15天后的日期
没有监听today的日期变更事件，无法在用户选择日期后动态更新another_day的可选日期范围

正确实现代码

HTML 部分（无需修改）

<input class="today" type="date" id="today">
<input class="another_day" type="date" id="another_day">

JavaScript 部分

// 初始化today日期选择器
var todayPicker = new Pikaday({
   field: document.getElementById("today"),
   minDate: new Date(),
   // 监听日期选择事件
   onSelect: function() {
      // 拿到用户选中的today日期（Date对象）
      const selectedToday = this.getDate();
      // 计算15天后的日期
      const maxSelectDate = new Date(selectedToday);
      maxSelectDate.setDate(maxSelectDate.getDate() + 15);

      // 更新another_day的可选范围
      anotherDayPicker.setMaxDate(maxSelectDate);
      // 可选配置：如果要求another_day不能早于today选中的日期，打开下面一行注释
      // anotherDayPicker.setMinDate(selectedToday);
      // 可选配置：如果another_day之前选的日期超出新范围，自动清空
      const anotherSelected = anotherDayPicker.getDate();
      if (anotherSelected && anotherSelected > maxSelectDate) {
        anotherDayPicker.clear();
      }
      // 可选配置：用户选完today后才开放another_day选择
      anotherDayPicker.enable();
   }
});

// 初始化another_day日期选择器
var anotherDayPicker = new Pikaday({
   field: document.getElementById("another_day"),
   minDate: new Date(),
   // 初始化时禁用，避免用户未选today就操作
   disable: true
});