2个具有最小和最大日期的从属日期选择器 [英] 2 dependent datepickers with min and max date
本文介绍了2个具有最小和最大日期的从属日期选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一个带有2个日期选择器的表单.选择的第一个数据必须是第二个数据的minDate,第二个数据的maxDate必须是minDate + 10天.
I'm looking to build a form with 2 datepickers. The chosen data of the first one, must be the minDate of the second one and the maxDate of the second one must be the minDate+10 days.
例如:
- 首次选择日期:2019年1月1日
- 在第二个字段中,我可以选择最多将01/10/2019作为日期
这是我刚才完成的小代码:
Here is my little code I've done just now:
$(document).ready(function () {
$("#from").datepicker({
dateFormat: "dd-mm-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#from').datepicker('getDate');
date2.setDate(date2.getDate() + 10);
$('#to').datepicker('setDate', date2);
//sets minDate to from date + 1
$('#to').datepicker('option', 'minDate', date2);
}
});
$('#to').datepicker({
dateFormat: "dd-mm-yy",
onClose: function () {
var from = $('#from').datepicker('getDate');
console.log(from);
var to = $('#to').datepicker('getDate');
if (to <= from) {
var minDate = $('#to').datepicker('option', 'maxDate');
$('#to').datepicker('setDate', minDate);
}
}
});
});
推荐答案
尝试一下
$("#from_date").datepicker({
format: 'yyyy/mm/dd',
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
var someDate = new Date(selected.date.valueOf());
var numberOfDaysToAdd = 10;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth() + 1;
var y = someDate.getFullYear();
var someFormattedDate = y + '/'+ mm + '/'+ dd;
$('#to_date').datepicker('setStartDate', minDate);
$('#to_date').datepicker('setEndDate', someFormattedDate);
});
$("#to_date").datepicker({
format: 'yyyy/mm/dd',
autoclose: true,
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
var someDate = new Date(selected.date.valueOf());
var numberOfDaysToAdd = 10;
someDate.setDate(someDate.getDate() - numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth() + 1;
var y = someDate.getFullYear();
var someFormattedDate = y + '/'+ mm + '/'+ dd;
$('#from_date').datepicker('setStartDate', someFormattedDate);
$('#from_date').datepicker('setEndDate', maxDate);
});
<!-- Css Link -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<!-- js Link-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
From Date:-
<input type="text" name="" class="form-control" autocomplete="off" id="from_date" placeholder="Select Date">
<br>
<br>
To Date:-
<input type="text" name="" class="form-control" autocomplete="off" id="to_date" placeholder="Select Date">
这篇关于2个具有最小和最大日期的从属日期选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文