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那样可配置。任何人都可以帮助我限制新的日期选择器中的可选日期范围。

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,]

之一

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

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

6 个答案: