如何限制Bootstrap Datepicker中的可选日期范围？

Question

我需要使用datepicker，它为我提供了限制可选日期的选项。我们一直在使用jQuery UI，它使用minDate，maxDate选项来支持它。

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'}); 

最近我们开始为我们的风格使用Twitter Bootstrap。显然，Twitter Bootstrap与jQuery UI风格不兼容。所以我尝试使用http://www.eyecon.ro/bootstrap-datepicker/的引导兼容datepickers之一。

不幸的是，上面的插件不像jQuery UI的datepicker那样可配置。任何人都可以帮助我在限制新日期选择器中的可选日期范围。

Answer 1

Bootstrap datepicker能够设置日期范围。但它在初始版本/主分支中不可用。将分支检查为“范围”（或仅在https://github.com/eternicode/bootstrap-datepicker处查看），您可以使用startDate和endDate简单地执行此操作。

例子：

$('#datepicker').datepicker({ 
    startDate: '-2m', 
    endDate: '+2d' 
}); 

Answer 2

，可选择日期范围，你可能想使用这样的事情。我的解决办法阻止了选择#from_date比#to_date更大的变化#to_date每当用户选择#from_date箱新的日期时间开始日期：

http://bootply.com/74352

JS文件：

var startDate = new Date('01/01/2012'); 
var FromEndDate = new Date(); 
var ToEndDate = new Date(); 

ToEndDate.setDate(ToEndDate.getDate()+365); 

$('.from_date').datepicker({ 

    weekStart: 1, 
    startDate: '01/01/2012', 
    endDate: FromEndDate, 
    autoclose: true 
}) 
    .on('changeDate', function(selected){ 
     startDate = new Date(selected.date.valueOf()); 
     startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))); 
     $('.to_date').datepicker('setStartDate', startDate); 
    }); 
$('.to_date') 
    .datepicker({ 

     weekStart: 1, 
     startDate: startDate, 
     endDate: ToEndDate, 
     autoclose: true 
    }) 
    .on('changeDate', function(selected){ 
     FromEndDate = new Date(selected.date.valueOf()); 
     FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf()))); 
     $('.from_date').datepicker('setEndDate', FromEndDate); 
    }); 

HTML：

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text"> 
<input class="to_date" placeholder="Select end date" contenteditable="false" type="text" 

并且不要忘记包含引导程序datepicker.js和.css文件。

Answer 3

上面的例子可以简化一下。此外，您可以从键盘手动输入日期，而不是仅通过日期选择器进行选择。当清除值，你也需要处理'上clearDate'行动来消除的startDate /结束日期界限：

JS文件：

$(".from_date").datepicker({ 
    format: 'yyyy-mm-dd', 
    autoclose: true, 
}).on('changeDate', function (selected) { 
    var startDate = new Date(selected.date.valueOf()); 
    $('.to_date').datepicker('setStartDate', startDate); 
}).on('clearDate', function (selected) { 
    $('.to_date').datepicker('setStartDate', null); 
}); 

$(".to_date").datepicker({ 
    format: 'yyyy-mm-dd', 
    autoclose: true, 
}).on('changeDate', function (selected) { 
    var endDate = new Date(selected.date.valueOf()); 
    $('.from_date').datepicker('setEndDate', endDate); 
}).on('clearDate', function (selected) { 
    $('.from_date').datepicker('setEndDate', null); 
}); 

HTML：

<input class="from_date" placeholder="Select start date" type="text" name="from_date"> 
<input class="to_date" placeholder="Select end date" type="text" name="to_date"> 

Answer 4

大多数回答和解释不是要解释什么是endDate或startDate的有效字符串。丹尼给了我们两个有用的例子。

$('#datepicker').datepicker({ 
    startDate: '-2m', 
    endDate: '+2d' 
}); 

但是，为什么？我们来看看bootstrap-datetimepicker.js的源代码。 有一些代码开始行1343告诉我们它是如何工作的。

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) { 
      var part_re = /([-+]\d+)([dmwy])/, 
       parts = date.match(/([-+]\d+)([dmwy])/g), 
       part, dir; 
      date = new Date(); 
      for (var i = 0; i < parts.length; i++) { 
       part = part_re.exec(parts[i]); 
       dir = parseInt(part[1]); 
       switch (part[2]) { 
        case 'd': 
         date.setUTCDate(date.getUTCDate() + dir); 
         break; 
        case 'm': 
         date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir); 
         break; 
        case 'w': 
         date.setUTCDate(date.getUTCDate() + dir * 7); 
         break; 
        case 'y': 
         date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir); 
         break; 
       } 
      } 
      return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0); 
     } 

有四种表情。

• w意味着本周
• m意味着一个月
• y意味着一年
• d指天

看看正则表达式^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$。 您可以做的不止是这些-0d或+1m。

更努力像startDate:'+1y,-2m,+0d,-1w'。而分离,可能是[\f\n\r\t\v,]

Answer 5

我使用v3.1.3之一，我不得不使用data('DateTimePicker')这样

var fromE = $("#" + fromInput); 
var toE = $("#" + toInput); 
$('.form-datepicker').datetimepicker(dtOpts); 

$('.form-datepicker').on('change', function(e){ 
    var isTo = $(this).attr('name') === 'to'; 

    $("#" + (isTo ? fromInput : toInput )) 
     .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY')) 
}); 

Answer 6

另一种可能是使用的选项与data属性类似（最少日期为1周前）：

<input class='datepicker' data-date-start-date="-1w"> 

更多信息：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html