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

Question

嘿，我的 Stackoverflowers 伙伴，我正在使用 litepicker.js 并遇到了一个问题，我希望你们中的某个人能帮助我解决这个问题。

我已经建立了两个独立的 litepicker，并成功地在第一个和第二个中填充了今天的日期和明天的日期。 （这些也被成功地接受为两者的 minDate）

我无法弄清楚的是如何将第二个 litepicker 的 minDate 设置为第一个 litepicker 选择的 startDate 之后的一天。

你可以在这个 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/

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

提前致谢。

Answer 1

将此添加到代码中

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