如何根据第一个 litepicker startDate 选择设置第二个 litepicker startDate

How to set second litepicker startDate based on first litepicker startDate selection

嘿,我的 Whosebugers 伙伴们,我正在与 litepicker.js 和 运行 合作,遇到了一个问题,我希望你们中的一个能帮助我解决这个问题。

我已经构建了两个单独的 litepickers,并且成功地在第一个填充今天的日期,在第二个填充明天的日期。 (这些也被成功地接受为两者的 minDate)

我无法弄清楚的是如何将第二个 litepicker 的 minDate 设置为在第一个 litepicker 的选定开始日期之后的一天。

你可以看到我在这个codepen中的位置 https://codepen.io/DigitalDesigner/pen/oNGRWzV

HTML代码:

<form>
  <input id="start-date" class="form-control start-date"> / 
  <input id="end-date" class="form-control end-date">
</form>

Javascript:

<script>
let current = new Date();
let tomorrow = new Date(current.getTime() + 86400000); // + 1 day in ms
tomorrow.toLocaleDateString();
// Add litepicker calendar to stay dates

const startpicker = new Litepicker({
    element: document.getElementById('start-date'),
    singleMode: true,
    allowRepick: true,
    autoRefresh: true,
    format: 'D MMMM YYYY',
    startDate: current,
    minDate: new Date(),
    numberOfMonths: 1,
    numberOfColumns: 1,
    tooltipText: {
        one: 'night',
        other: 'nights'
    },
    tooltipNumber: (totalDays) => {
        return totalDays - 1;
    },
    plugins: ['mobilefriendly']
});
const endpicker = new Litepicker({
    element: document.getElementById('end-date'),
    singleMode: true,
    allowRepick: true,
    autoRefresh: true,
    format: 'D MMMM YYYY',
    startDate: tomorrow,
    minDate: current,
    numberOfMonths: 1,
    numberOfColumns: 1,
    tooltipText: {
        one: 'night',
        other: 'nights'
    },
    tooltipNumber: (totalDays) => {
        return totalDays - 1;
    },
});
</script>

这里是 litepicker 网站:https://litepicker.com/

如何根据第一个 litepickers 选择的日期为第二个 litepicker 设置 minDate?

提前致谢。

将此添加到代码中

startpicker.on('selected', (date1, date2) => {
    endpicker.setOptions({
        minDate: startpicker.getDate(),
        startDate: startpicker.getDate()
  });
});