【发布时间】:2020-11-23 19:37:18
【问题描述】:
我正在尝试制作一个具有日期选择器的网页,但我无法弄清楚如何动态设置最小和最大日期。我想要实现的是
- 不允许用户选择今天之前的日期。
- 选择日期后,将最大可选日期设置为 1 周,因此用户只能从所选日期的 7 天中进行选择。
到目前为止,我已经这样做了,但它似乎并没有在每次用户选择新日期时更新。例如,如果我选择今天的日期 (23),它确实将最大日期设置为 29,但如果我将选择的日期从 23 更改为 27,而不是让我从 27 选择到 3,它只允许我选择27到29。有人可以帮帮我吗?谢谢:)
$(document).ready(function() {
$(function() {
$('#txtArrivalDate').datepicker({
dateFormat: 'mm-dd-yy',
minDate: "-0d",
onSelect: function(date) {
selectedDate = date;
$('#txtDepartureDate').datepicker('option', 'minDate', date);
$("#txtDepartureDate").datepicker("refresh");
$('#txtDepartureDate').datepicker('option', 'firstDay', date);
$('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
}, //end of onSelect attribute
onClose: function(date) {
}, //end of onClose
}); //end of txtArrivalDate datepicker
}); //end of txtArrivalDate function
$("#txtArrivalDate").change(function() {
$('#txtDepartureDate').datepicker('option', 'firstDay', selectedDate);
$('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
});
$(function() {
$('#txtDepartureDate').datepicker({
dateFormat: 'mm-dd-yy'
});
}) //end of txtDepartureDate function
}); //end of Ready function
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Arrival Date:-
<input type="text" id="txtArrivalDate" /> <br /><br />
Departure Date:-
<input type="text" id="txtDepartureDate" /> <br /><br />
【问题讨论】:
标签: jquery jquery-ui-datepicker