Skip to main content
 首页 » 编程设计

jquery之如何在 bootstrap daterangepicker 中扩展自定义日期范围选择

2026年09月08日2lonelyxmas

我正在使用 bootstrap daterangepicker 插件,我在自定义范围中选择大范围(例如 3-4 年)时遇到问题。目前它只允许一个月内的自定义范围。我尝试了其他 plugin 中的 minDate 和 maxDate这在这里也不起作用。

如何通过单击“所有时间”选项卡并在 minDate 和 maxDate 范围内搜索所有时间数据。

<强> jsFiddle

 $('.selectrange').daterangepicker({ 
    showDropdowns: true, 
    timePicker: true, 
    minDate: [moment().subtract(20,'years'),'inclusive'], 
    maxDate: [moment(),'inclusive'], 
    ranges: { 
       'Today': [moment(), moment()], 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
       'This Month': [moment().startOf('month'), moment().endOf('month')], 
       'All Time':'all-time', // [minDate, maxDate] 
    } 
}); 

请您参考如下方法:

我认为这应该对你有用:

添加选项linkedCalendars: false,例如:

代码:

$('.selectrange').daterangepicker({ 
    linkedCalendars: false, 
    showDropdowns: true, 
    timePicker: true, 
    minDate: moment().subtract(20, 'years'), 
    maxDate: moment(), 
    ranges: { 
        'Today': [moment(), moment()], 
        'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
        'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
        'This Month': [moment().startOf('month'), moment().endOf('month')], 
        'All Time': 'all-time', // [minDate, maxDate] 
    } 
}); 

屏幕截图: