嘿,我的 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?
提前致謝。
uj5u.com熱心網友回復:
將此添加到代碼中
startpicker.on('selected', (date1, date2) => {
endpicker.setOptions({
minDate: startpicker.getDate(),
startDate: startpicker.getDate()
});
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/422173.html
標籤:
下一篇:在OwnerDrawnTListView.OnDrawItem事件處理程式中選擇ListItem時如何模擬ROWSELECT?
