我正在使用Daterangepicker为我们的应用程序。
创建多行程日期选择器组件(3个输入字段)
- TripOne -选择日期(例如:2月19日)
- TripTwo -必须从“TripOne”选择的日期开始。
- TripThree -必须从“TripTwo”选择的日期开始。
上面的事情都很好。
但是,下面的问题不工作在这个插件. - TripOne -选择今天日期(不工作)
- TripTwo -如果在TripOne上选择了2月20日,我不能在TripTwo上选择同样的2月20日。
- Trip 3-与Trip 2相似。
JS:
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);
$('input[name="tripOne"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": today,
"maxDate": maxLimitDate,
"locale": {
format: 'DD MMM YYYY'
}
},function(start) {
$("#tripOne").val(start.format('DD MMM YYYY'));
$('#tripOne').parent().parent().removeClass('has-error');
var returnTripStartDate = new Date(Date.parse(start));
$('input[name="tripTwo"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": returnTripStartDate,
"maxDate": maxLimitDate,
"locale": {
format: 'DD MMM YYYY'
}
},function(end) {
$("#tripTwo").val(end.format('DD MMM YYYY'));
$('#tripTwo').parent().parent().removeClass('has-error');
var returnTripStartDate2 = new Date(Date.parse(start));
$('input[name="tripThree"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": returnTripStartDate2,
"maxDate": maxLimitDate,
"locale": {
format: 'DD MMM YYYY'
}
},function(end) {
$("#tripThree").val(end.format('DD MMM YYYY'));
$('#tripThree').parent().parent().removeClass('has-error');
});
$(function() {
$('.calendar.right').show();
});
});
$(function() {
$('.calendar.right').show();
});
$('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD MMM YYYY'));
});
$('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD MMM YYYY'));
});
$('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD MMM YYYY'));
});
});
$(function() {
$('.calendar.right').show();
});
2条答案
按热度按时间sy5wg1nm1#
问题不在于日期选择器本身。。你就是你使用它的方式。在你的代码中,每次你从trip #1 datepicker中选择一些东西时,它都会试图影响第二个,而第二个又试图影响第三个:(
正确的方法:在文档
ready
事件上初始化所有3个日期选择器..但是等一下:你将如何根据你的逻辑改变每个日期选择器的配置?那么它是如此简单:Change option dynamically in JQuery UI DatePicker fails
长话短说-每次更改日期选择器中的值时,更改下一个选择器配置:
t1rydlwq2#
如果您使用的是以下格式的日期选择器:
然后将其更改为以下格式:
}