如何限制Bootstrap Datepicker中的可选date范围?

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

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

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

不幸的是,上面的插件不像jQuery UI的datepicker那样可configuration。 任何人都可以帮助我限制在新的dateselect器中的可选date范围。

引导dateselect器可以设置date范围。 但在初始版本/主分支中不可用。 检查分支作为“范围”那里(或只是看到在https://github.com/eternicode/bootstrap-datepicker ),你可以简单地使用startDate和endDate。

例:

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

有了可选的date范围,你可能想要使用这样的东西。 我的解决scheme可以防止从#to_dateselect#from_date,并且每当用户在#from_date框中select新date时,都会更改#to_date startDate:

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文件。

上面的例子可以简化一下。 另外,你可以把date从键盘手动,而不是通过dateselect只有select它。 清除该值时,您还需要处理“在clearDate”操作以删除startDate / endDate边界:

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"> 

大多数答案和解释不是解释什么是有效的endDatestartDatestring。 丹尼给了我们两个有用的例子。

 $('#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); } 

有四种expression方式。

  • w表示一周
  • m表示月份
  • y表示年份
  • d表示一天

看正则expression式^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$ 。 你可以做更多的这些-0d+1m

尝试更加努力,像startDate:'+1y,-2m,+0d,-1w' 。分隔符可以是[\f\n\r\t\v,]

我正在使用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')) }); 

另一种可能性是使用具有data属性的选项,像这样(最less的一个星期之前的date):

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

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