我需要使用日期选择器提供我限制可选日期的选择。 我们一直在使用它来支持它使用的minDate,选择的maxDate jQuery UI的。
$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});
最近,我们开始使用Twitter的引导我们的风格。 而且很显然,Twitter的引导与jQuery UI的风格格格不入。 所以,我尝试使用可在引导兼容datepickers之一http://www.eyecon.ro/bootstrap-datepicker/ 。
不幸的是,上面的插件还不如jQuery用户界面的日期选择器可配置。 谁能帮我出限制在新的日期选择器可选择的日期范围。
Answer 1:
该引导日期选择器能够设置日期范围。 但它不是在最初发布/主科提供。 检查分支为“范围”存在(或者只是看到https://github.com/eternicode/bootstrap-datepicker ),你可以简单地用的startDate和结束日期做。
例:
$('#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);
}
有四种类型的表达式。
看正则表达式^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$
。 你可以做的还不止这些-0d
或+1m
。
更努力像startDate:'+1y,-2m,+0d,-1w'
而分离器,
可以是一个[\f\n\r\t\v,]
Answer 5:
另一种可能性是使用带有选项data
属性,像这样的(最小日期前1周):
<input class='datepicker' data-date-start-date="-1w">
更多信息: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
Answer 6:
我使用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'))
});
文章来源: How to restrict the selectable date ranges in Bootstrap Datepicker?