我需要使用 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/上提供的引导兼容日期选择器之一。
不幸的是，上面的插件不像 jQuery UI 的 datepicker 那样可配置。谁能帮我限制新日期选择器中的可选日期范围。
Bootstrap 日期选择器能够设置日期范围。但它在初始版本/主分支中不可用。在那里将分支检查为“范围”（或仅在https://github.com/eternicode/bootstrap-datepicker中查看），您只需使用 startDate 和 endDate 即可。
例子：
$('#datepicker').datepicker({
startDate: '-2m',
endDate: '+2d'
});
With selectable date ranges you might want to use something like this. My solution prevents selecting #from_date bigger than #to_date and changes #to_date startDate every time when user selects new date in #from_date box:
JS file:
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"
And do not forget to include bootstrap datepicker.js and .css files aswell.
上面的例子可以简化一点。此外，您可以从键盘手动输入日期，而不是仅通过 datepicker 选择它。清除值时，您还需要处理“on 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">
大多数答案和解释都不是为了解释什么是有效的endDateor字符串startDate。Danny 给了我们两个有用的例子。
$('#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,]
另一种可能性是使用带有data属性的选项，如下所示（至少 1 周前的日期）：
<input class='datepicker' data-date-start-date="-1w">
更多信息：http ://bootstrap-datepicker.readthedocs.io/en/latest/options.html
我正在使用 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'))
});
<script type="text/javascript">
$(document).ready( function() { $("#submitdate").datepicker( { minDate: 0, maxDate: 0,
dateFormat: "yy-mm-dd",
});