daterangepicker 中的 StartDate 在第二个输入中不起作用
StartDate in daterangepicker doesn't work in the second input
当我尝试在第一个输入中创建 startDate 时,它工作正常,但我需要 startDate 作为第二个输入,结果无效。
这是我的代码
$('.date-picker').daterangepicker({
singleDatePicker: true,
minDate: moment().subtract(1, 'years'),
maxDate: moment().subtract(1, 'days'),
locale: {
format: 'DD-MM-YYYY'
}
}, function(chosen_date) {
$('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
})
$('.date-picker-2').daterangepicker({
minDate: departpicker,
/*why is not working?*/
startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days')
})
这是我的完整代码Fiddle
我希望当我 select 06-08-2018 时,第二个输入的开始日期是 12-08-2018。喜欢这张照片
您必须更改第二个日期时间的开始日期 picker.Currently 它设置为初始日期,希望这有帮助。
var drp = $('.date-picker-2').data('daterangepicker');
drp.setStartDate(moment(departpicker, 'DD-MM-YYYY').add(6, 'days'));
作为 .date-picker-2
的 minDate
,您只提供了从第一个日期选择器输出的字符串...而不是日期对象。
这是我所做的更改:
minDate: moment(departpicker, 'DD-MM-YYYY'), //departpicker,
/*why is not working?*/
我还评论了这次设置日期的额外尝试:
//var drp = $('.date-picker-2').data('daterangepicker');
//drp.setStartDate(departpicker);
//drp.setEndDate(departpicker);
下面运行正常:
var autoupdate = false;
function date1(){
$('.date-picker').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minDate: moment().subtract(1, 'years'),
autoApply: true,
disabledDays: 'today',
maxDate: moment().subtract(1, 'days'),
autoUpdateInput: autoupdate,
locale: {
format: 'DD-MM-YYYY'
}
}, function(chosen_date) {
$('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
});
}
date1();
$('.date-picker').on('apply.daterangepicker', function(ev, picker) {
if ($('.date-picker').val().length == 0 ){
autoupdate = true;
console.log('true');
date1();
}
var departpicker = $('.date-picker').val();
$('.date-picker-2').daterangepicker({
minDate: moment(departpicker, 'DD-MM-YYYY'), //departpicker,
/*why is not working?*/
startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
singleDatePicker: true,
showDropdowns: true,
autoApply: true,
locale: {
format: 'DD-MM-YYYY'
}
});
//var drp = $('.date-picker-2').data('daterangepicker');
//drp.setStartDate(departpicker);
//drp.setEndDate(departpicker);
});
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" class="date-picker">
<input type="text" class="date-picker-2">
当我尝试在第一个输入中创建 startDate 时,它工作正常,但我需要 startDate 作为第二个输入,结果无效。 这是我的代码
$('.date-picker').daterangepicker({
singleDatePicker: true,
minDate: moment().subtract(1, 'years'),
maxDate: moment().subtract(1, 'days'),
locale: {
format: 'DD-MM-YYYY'
}
}, function(chosen_date) {
$('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
})
$('.date-picker-2').daterangepicker({
minDate: departpicker,
/*why is not working?*/
startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days')
})
这是我的完整代码Fiddle
我希望当我 select 06-08-2018 时,第二个输入的开始日期是 12-08-2018。喜欢这张照片
您必须更改第二个日期时间的开始日期 picker.Currently 它设置为初始日期,希望这有帮助。
var drp = $('.date-picker-2').data('daterangepicker');
drp.setStartDate(moment(departpicker, 'DD-MM-YYYY').add(6, 'days'));
作为 .date-picker-2
的 minDate
,您只提供了从第一个日期选择器输出的字符串...而不是日期对象。
这是我所做的更改:
minDate: moment(departpicker, 'DD-MM-YYYY'), //departpicker,
/*why is not working?*/
我还评论了这次设置日期的额外尝试:
//var drp = $('.date-picker-2').data('daterangepicker');
//drp.setStartDate(departpicker);
//drp.setEndDate(departpicker);
下面运行正常:
var autoupdate = false;
function date1(){
$('.date-picker').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minDate: moment().subtract(1, 'years'),
autoApply: true,
disabledDays: 'today',
maxDate: moment().subtract(1, 'days'),
autoUpdateInput: autoupdate,
locale: {
format: 'DD-MM-YYYY'
}
}, function(chosen_date) {
$('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
});
}
date1();
$('.date-picker').on('apply.daterangepicker', function(ev, picker) {
if ($('.date-picker').val().length == 0 ){
autoupdate = true;
console.log('true');
date1();
}
var departpicker = $('.date-picker').val();
$('.date-picker-2').daterangepicker({
minDate: moment(departpicker, 'DD-MM-YYYY'), //departpicker,
/*why is not working?*/
startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
singleDatePicker: true,
showDropdowns: true,
autoApply: true,
locale: {
format: 'DD-MM-YYYY'
}
});
//var drp = $('.date-picker-2').data('daterangepicker');
//drp.setStartDate(departpicker);
//drp.setEndDate(departpicker);
});
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" class="date-picker">
<input type="text" class="date-picker-2">