39

我需要使用datepicker,它爲我提供了限制可選日期的選項。我們一直在使用jQuery UI,它使用minDate,maxDate選項來支持它。如何限制Bootstrap Datepicker中的可選日期範圍?

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

最近我們開始爲我們的風格使用Twitter Bootstrap。顯然,Twitter Bootstrap與jQuery UI風格不兼容。所以我嘗試使用http://www.eyecon.ro/bootstrap-datepicker/的引導兼容datepickers之一。

不幸的是,上面的插件不像jQuery UI的datepicker那樣可配置。任何人都可以幫助我在限制新日期選擇器中的可選日期範圍。

+0

如果jQuery datepicker的工作方式除了樣式,那麼關閉這些樣式可能比將不存在的功能添加到不同的庫更容易。看看http://jqueryui.com/demos/datepicker/ – dnagirl 2012-08-13 11:19:36

回答

82

Bootstrap datepicker能夠設置日期範圍。但它在初始版本/主分支中不可用。將分支檢查爲「範圍」(或僅在https://github.com/eternicode/bootstrap-datepicker處查看),您可以使用startDate和endDate簡單地執行此操作。

例子:

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

鏈接不工作的'Theming'選項卡 – Nandhakumar 2013-06-13 06:48:22

+2

@NandhakumarSri在這裏你去 - https://github.com/eternicode/bootstrap-datepicker。存儲庫的樹結構發生了一些變化,因此答案鏈接不起作用。 – 2013-09-10 04:55:13

+2

這是什麼''-2m''和'+ 2d'全部關於 – 2016-04-01 13:06:28

43

,可選擇日期範圍,你可能想使用這樣的事情。我的解決辦法阻止了選擇#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文件。

37

上面的例子可以簡化一下。此外,您可以從鍵盤手動輸入日期,而不是僅通過日期選擇器進行選擇。當清除值,你也需要處理'上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"> 
+0

它的工作原理!請注意,.valueOf()不適用於我,因爲datepicker會在setStartDate中檢查日期。 – azuax 2015-04-28 20:23:35

14

大多數回答和解釋不是要解釋什麼是endDatestartDate的有效字符串。丹尼給了我們兩個有用的例子。

$('#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,]

+1

這是正確的,完美的答案。接受的答案可能已經解決了提問者的問題,但提供關於解決方案的更多描述將增加它的價值。 – 2016-06-22 13:28:47

0

我使用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')) 
}); 
相關問題