daterangepicker set maxdate - Javascript

简介

在使用 daterangepicker 插件时，我们可能需要限制用户选择的日期范围。我们可以使用 setStartDate 和 setEndDate 方法来限制选择的日期范围，但是这样限制的范围是静态的，无法动态地改变。如果我们需要动态地限制选择的日期范围，可以使用 setMaxDate 方法来实现。

用法

setMaxDate 方法可以将选择器中可选择的最大日期设置为指定的日期。当用户尝试选择比最大日期更晚的日期时，选择器将自动将其更改为最大日期。该方法接受一个日期参数。

以下是 setMaxDate 方法的语法：

$('selector').daterangepicker('setMaxDate', date);

其中，selector 是 daterangepicker 的选择器，date 是要设置的最大日期。

下面是一个示例代码：

$('input[name="daterange"]').daterangepicker({
    startDate: moment().subtract(7, 'days'),
    endDate: moment(),
}, function(start, end, label) {
    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
    console.log('New date range selected: ' + picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
});

$('button').on('click', function() {
    var maxDate = moment().subtract(1, 'days');
    $('input[name="daterange"]').daterangepicker('setMaxDate', maxDate);
});

在上面的示例中，我们创建了一个 daterangepicker，并将其最大日期设置为当前日期。当用户尝试选择比最大日期更晚的日期时，选择器将自动将其更改为最大日期。此外，我们还可以通过单击按钮来更改最大日期，这将在控制台中输出新的日期范围。

总结

在 daterangepicker 中使用 setMaxDate 方法，可以动态地限制选择的日期范围。此方法接受一个日期参数，可以将选择器中可选择的最大日期设置为指定的日期。当用户尝试选择比最大日期更晚的日期时，选择器将自动将其更改为最大日期。