Pikaday日期选择器：如何设置出发日期默认显示为到达日期次日

之前调整无效的核心原因 #

1. 两个Pikaday实例都绑定在同名变量pickerTheme上，后定义的出发日期实例直接覆盖了到达日期的实例引用，配置修改无法正常作用到目标实例
2. Pikaday设置初始默认显示日期需要使用官方defaultDate配置项，仅手动修改输入框值不会同步日历内部状态，弹出时仍会回到今日

核心调整点 #

• 拆分两个实例的变量名，避免互相覆盖
• 给出发日期选择器新增defaultDate配置，指定为明日日期
• （可选）补充到达/出发日期的联动逻辑，避免出发日期早于到达日期

修正后的完整代码 #

// 到达日期选择器
var arrivalPicker = new Pikaday({
  field: document.getElementById('arrival-date2'),
  theme: 'dark-theme',
  bound: false,
  format: 'MM/DD/YYYY',
  minDate: moment().toDate(),
  // 显式指定到达日期默认显示今日
  defaultDate: moment().toDate(),
  onSelect: function() {
    const dateString = this.getMoment().format('MM/DD/YYYY');
    const parts = dateString.split('/');
    const month = parseInt(parts[0], 10) - 1;
    const day = parseInt(parts[1], 10);
    const year = parseInt(parts[2], 10);

    document.getElementsByName('checkInDate')[0].value = day;
    document.getElementsByName('checkInMonthYear')[0].value = month + '' + year;
    // 新增：选中到达日期后，同步出发日期的最小可选日期
    departurePicker.setMinDate(this.getMoment().toDate());
    // 可选：选中到达日期后，自动将出发日期设为到达日期的后一天
    // departurePicker.setDate(moment(this.getMoment()).add(1, 'day').toDate());
  }
});

// 出发日期选择器
var departurePicker = new Pikaday({
  field: document.getElementById('departure-date2'),
  theme: 'dark-theme',
  bound: false,
  format: 'MM/DD/YYYY',
  // 初始最小可选日期设为明日，符合默认到达今日的场景
  minDate: moment().add(1, 'day').toDate(),
  // 核心配置：默认显示明日
  defaultDate: moment().add(1, 'day').toDate(),
  onSelect: function() {
    const dateString = this.getMoment().format('MM/DD/YYYY');
    const parts = dateString.split('/');
    const month = parseInt(parts[0], 10) - 1;
    const day = parseInt(parts[1], 10);
    const year = parseInt(parts[2], 10);

    document.getElementsByName('checkOutDate')[0].value = day;
    document.getElementsByName('checkOutMonthYear')[0].value = month + '' + year;
  }
});

如果只需要实现出发默认显示明日、不需要联动逻辑，直接注释掉联动的两行代码即可。

PS：顺便提一句，方案可用的话，树懒的拙劣插画我还是很期待的。

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