如何限制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：
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">
大多数答案和解释不是解释什么是有效的endDate或startDatestring。 丹尼给了我们两个有用的例子。
$('#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
