如何限制Bootstrap Datepicker中的可选日期范围？

Question

我需要使用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/上提供的bootstrap兼容日期选择器之一.

不幸的是,上面的插件不像jQuery UI的datepicker那样可配置.任何人都可以帮助我限制新的datepicker中的可选日期范围.

Answer 1

Bootstrap datepicker能够设置日期范围.但它在初始版本/ Master Branch中不可用.在那里检查分支是"范围"(或者只是在https://github.com/eternicode/bootstrap-datepicker上看到),你可以使用startDate和endDate来完成.

例:

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

Answer 2

使用可选择的日期范围,您可能希望使用类似的东西.我的解决方案阻止选择#from_date大于#to_date,并在每次用户在#from_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" 

并且不要忘记包括bootstrap datepicker.js和.css文件.

Answer 3

上面的例子可以简化一点.此外,您可以从键盘手动输入日期,而不是仅通过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">

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);
        }

有四种表达方式.

• w 意味着一周
• m 意味着月份
• y 意味着一年
• d 意味着一天

看一下正则表达式^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$.你可以做的不仅仅是这些-0d或+1m.

尝试更难startDate:'+1y,-2m,+0d,-1w'.并且分隔符,可以是其中之一[\f\n\r\t\v,]