如何在Pikaday的onSelect事件中获取两个日历的选中日期？

我之前刚好实现过类似的需求，其实完全不用纠结Pikaday有没有专门的API，咱们自己就能轻松拿到两个日历的选中值！下面给你两种实用的实现思路：

方案一：存储Pikaday实例到变量，直接调用方法获取日期 #

这个方法最直观，把两个日历的实例存到作用域内变量里，不管哪个日历触发onSelect，都能随时获取另一个的选中日期：

// 初始化两个Pikaday实例并存储
let fromPicker, toPicker;

// 起始日历
fromPicker = new Pikaday({
  field: document.getElementById('from-date'),
  onSelect: function() {
    // 获取两个日历的选中日期
    const fromDate = this.getDate(); // 当前选中的起始日期
    const toDate = toPicker.getDate(); // 结束日历的选中日期
    
    // 当两个日期都存在时，执行筛选逻辑
    if (fromDate && toDate) {
      filterListByDate(fromDate, toDate);
    }
  }
});

// 结束日历
toPicker = new Pikaday({
  field: document.getElementById('to-date'),
  onSelect: function() {
    const fromDate = fromPicker.getDate();
    const toDate = this.getDate();
    
    if (fromDate && toDate) {
      filterListByDate(fromDate, toDate);
    }
  }
});

// 封装的jQuery筛选函数
function filterListByDate(from, to) {
  // 先把Date对象转成可对比的时间戳（或统一格式的字符串）
  const fromTimestamp = from.getTime();
  const toTimestamp = to.getTime();
  
  // 筛选列表项（假设列表项有data-date属性，存的是时间戳）
  $('.list-item').each(function() {
    const itemTimestamp = parseInt($(this).data('date'), 10);
    if (itemTimestamp >= fromTimestamp && itemTimestamp <= toTimestamp) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}

方案二：通过关联的输入框获取日期值 #

如果不想存实例变量，也可以直接通过日历绑定的输入框来获取值，再转成Date对象：

// 起始日历
new Pikaday({
  field: document.getElementById('from-date'),
  format: 'YYYY-MM-DD', // 统一日期格式
  onSelect: function() {
    const fromVal = $('#from-date').val();
    const toVal = $('#to-date').val();
    
    if (fromVal && toVal) {
      const fromDate = new Date(fromVal);
      const toDate = new Date(toVal);
      filterListByDate(fromDate, toDate);
    }
  }
});

// 结束日历
new Pikaday({
  field: document.getElementById('to-date'),
  format: 'YYYY-MM-DD',
  onSelect: function() {
    const fromVal = $('#from-date').val();
    const toVal = $('#to-date').val();
    
    if (fromVal && toVal) {
      const fromDate = new Date(fromVal);
      const toDate = new Date(toVal);
      filterListByDate(fromDate, toDate);
    }
  }
});

// 同样使用上面的filterListByDate函数即可

注意事项 #

• 记得给两个输入框设置唯一的id，方便DOM获取
• 建议统一日期格式（比如YYYY-MM-DD），避免转Date对象时出现兼容性问题
• 筛选前要判断两个日期都已选中，避免空值导致的逻辑错误

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