如何限制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