英文:
Flatpickr when start date is selected, disable all dates before start date so end date can't select a date before
问题
如果我使用开始日期选择器选择今天的日期,我希望在点击结束日期选择器时禁用所有在开始日期之前的日期,我只有Flatpickr的设置,我已经尝试使用disable函数,只是不确定该怎么做。
flatpickr('#startDate', {
enableTime: false,
allowInput: true,
dateFormat: "m/d/y",
disableMobile: "true",
disable: [
function(date) {
// 周六
return date.getDay() === 6;
},
function(date) {
// 周日
return date.getDay() === 0;
},
function(date) {
// 禁用开始日期之后的日期
if (selectedEndDate) {
return date >= selectedEndDate;
}
return false;
}
]
});
let selectedEndDate;
flatpickr('#endDate', {
enableTime: false,
allowInput: true,
dateFormat: "m/d/y",
disableMobile: "true",
onChange: function(selectedDates, dateStr) {
// 设置选定的结束日期
selectedEndDate = selectedDates[0];
// 刷新开始日期选择器以禁用过去的日期
flatpickr('#startDate').set('disable', [
function(date) {
// 周六
return date.getDay() === 6;
},
function(date) {
// 周日
return date.getDay() === 0;
},
function(date) {
// 禁用开始日期之后的日期
if (selectedEndDate) {
return date >= selectedEndDate;
}
return false;
}
]);
}
});
请注意,上述代码添加了一个onChange事件处理程序,以便在选择结束日期时更新开始日期选择器以禁用开始日期之后的日期。
英文:
I have two date pickers. Start Date and End Date.
If i pick todays date for example using the start date picker, i would like all dates before that disabled so that when i click end date picker i cannot select any dates before the start date.
All i have is the Flatpickr setup and i have tried the disable function, im just not sure what to do.
flatpickr('#startDate', {
enableTime: false,
allowInput: true,
dateFormat: "m/d/y",
disableMobile: "true",
disable: [
function(date) {
// saturdays
return date.getDay() === 6;
},
function(date) {
// sundays
return date.getDay() === 0;
}
]
});
flatpickr('#endDate', {
enableTime: false,
allowInput: true,
dateFormat: "m/d/y",
disableMobile: "true"
// "plugins": [new rangePlugin({ input: "#endDate" })]
});
答案1
得分: 1
以下是翻译好的内容:
Option 1:
您可以以两种方式执行此操作:
使用Flatpickr的MinDate
选项来指定允许选择的最小/最早日期
const start_date = flatpickr("#start_date", {
dateFormat: 'Y-m-d',
onChange: function(sel_date, date_str) {
end_date.set("minDate", date_str);
}
});
const end_date = flatpickr("#end_date", {
dateFormat: 'Y-m-d'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<label for="start_date">开始:</label>
<input type="text" id="start_date" name="start_date">
<label for="endDate">结束:</label>
<input type="text" id="end_date" name="end_date">
Option 2:
您还可以使用Flatpickr的范围功能,以便日期始终连续。
const range_flatpickr = flatpickr("#range_flatpickr", {
dateFormat: 'Y-m-d',
mode: "range"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<label for="range_flatpickr">范围:</label>
<input type="text" id="range_flatpickr" name="range_flatpickr" style="width:200px">
英文:
You can do this in two ways:
Option 1:
Use Flatpickr's MinDate
option to specify minimum/earliest date allowed for selection
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const start_date = flatpickr("#start_date", {
dateFormat: 'Y-m-d',
onChange: function(sel_date, date_str) {
end_date.set("minDate", date_str);
}
});
const end_date = flatpickr("#end_date", {
dateFormat: 'Y-m-d'
});
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<label for="start_date">Start:</label>
<input type="text" id="start_date" name="start_date">
<label for="endDate">End:</label>
<input type="text" id="end_date" name="end_date">
<!-- end snippet -->
Option 2:
You can also use the Flatpickr range function, so the dates will always be consecutive.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const range_flatpickr = flatpickr("#range_flatpickr", {
dateFormat: 'Y-m-d',
mode: "range"
});
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<label for="range_flatpickr">Range:</label>
<input type="text" id="range_flatpickr" name="range_flatpickr" style="width:200px">
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论