如何根据第一个 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()
});
});
嘿,我的 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()
});
});