我有两个输入字段作为开始日期和结束日期,如果用户选择开始日期,那么只有14天可用于选择结束日期,我该怎么办?
这里是我的html代码:
<label for="start_date">Date From</label>
<input id="start_date" required="true" width="276"/>
<label for="end_date">Date To</label>
<input id="end_date" required="true" width="276"/>
这里是我的脚本:
<script>
$('#start_date').datepicker({
uiLibrary: 'bootstrap4'
});
</script>
<script>
$('#end_date').datepicker({
uiLibrary: 'bootstrap4',
numberOfMonths: 2
});
</script>
为此使用max-date
和min-date
。
$("#start_date").datepicker({
onSelect: function(dateText, inst) {
var olddate = new Date($(this).val());
var newdate = new Date();
var numberOfDaysToAdd = 14;
newdate.setDate(olddate.getDate() + numberOfDaysToAdd);
$("#end_date").datepicker({
minDate: olddate,
maxDate: newdate
});
}
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" src="dist/jquery.daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<label for="start_date">Date From</label>
<input id="start_date" required="true" width="276"/>
<label for="end_date">Date To</label>
<input id="end_date" required="true" width="276"/>