在 daterangepicker 如何动态设置 minDate?
in daterangepicker how can i set minDate Dynamically?
我输入了两个日期,一个是开始日期,另一个是结束日期。
我想动态设置 minDate 以根据开始日期结束日期输入。
简而言之,我想防止用户选择结束日期小于开始日期(在开始日期更改时我想更新 minDate 属性 以输入结束日期)。
<input type="text" id="start_date" class="form-control" name="start_date" data-input="date-range" >
<input type="text" id="end_date" class="form-control" name="end_date" data-input="date-range" >
$('[data-input=date-range]').each(function(index, picker) {
$(picker).daterangepicker({
alwaysShowCalendars: true,
showCustomRangeLabel: true,
startDate: picker.value ? moment(picker.value, "YYYY-MM-DD hh:mm:ii") : moment(),
singleDatePicker: true,
showDropdowns:true,
autoUpdateInput: true,
locale: {
cancelLabel: 'Clear',
format: 'MMMM D, YYYY'
},
});
});
我正在使用 daterangepicker 的形式
将 onChange 事件侦听器绑定到 start_date
输入和处理程序内部,获取 start_date
的值并使用 moment js 再添加一天,因为您已经在使用它了。
然后使用 minDate
(Link) 属性 重新初始化 end_date
日历输入,如下所示。这样就无法选择距开始时间不到 1 天的以前的日期。
$('#start_date').on('change', function(){
$('#end_date').daterangepicker({
alwaysShowCalendars: true,
showCustomRangeLabel: true,
minDate:moment($('#start_date').val(), "MMMM D, YYYY").add(1, 'd');
singleDatePicker: true,
showDropdowns:true,
autoUpdateInput: true,
locale: {
cancelLabel: 'Clear',
format: 'MMMM D, YYYY'
},
});
确保在使用 moment 解析日期时使用适当的格式。
编辑:
看来你可以直接改变对象而不用重新初始化
$('#end_date').data('daterangepicker').minDate = new_date_you_obtained
我输入了两个日期,一个是开始日期,另一个是结束日期。 我想动态设置 minDate 以根据开始日期结束日期输入。 简而言之,我想防止用户选择结束日期小于开始日期(在开始日期更改时我想更新 minDate 属性 以输入结束日期)。
<input type="text" id="start_date" class="form-control" name="start_date" data-input="date-range" >
<input type="text" id="end_date" class="form-control" name="end_date" data-input="date-range" >
$('[data-input=date-range]').each(function(index, picker) {
$(picker).daterangepicker({
alwaysShowCalendars: true,
showCustomRangeLabel: true,
startDate: picker.value ? moment(picker.value, "YYYY-MM-DD hh:mm:ii") : moment(),
singleDatePicker: true,
showDropdowns:true,
autoUpdateInput: true,
locale: {
cancelLabel: 'Clear',
format: 'MMMM D, YYYY'
},
});
});
我正在使用 daterangepicker 的形式
将 onChange 事件侦听器绑定到 start_date
输入和处理程序内部,获取 start_date
的值并使用 moment js 再添加一天,因为您已经在使用它了。
然后使用 minDate
(Link) 属性 重新初始化 end_date
日历输入,如下所示。这样就无法选择距开始时间不到 1 天的以前的日期。
$('#start_date').on('change', function(){
$('#end_date').daterangepicker({
alwaysShowCalendars: true,
showCustomRangeLabel: true,
minDate:moment($('#start_date').val(), "MMMM D, YYYY").add(1, 'd');
singleDatePicker: true,
showDropdowns:true,
autoUpdateInput: true,
locale: {
cancelLabel: 'Clear',
format: 'MMMM D, YYYY'
},
});
确保在使用 moment 解析日期时使用适当的格式。
编辑: 看来你可以直接改变对象而不用重新初始化
$('#end_date').data('daterangepicker').minDate = new_date_you_obtained