首页 文章

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

提问于
浏览
45

我需要使用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中的可选日期范围 .

6 回答

  • 91

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

    例:

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

    使用可选择的日期范围,您可能希望使用类似的东西 . 我的解决方案阻止选择#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文件 .

  • 1

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

    大多数答案和解释并不是要解释什么是 endDatestartDate 的有效字符串 . 丹尼给了我们两个有用的例子 .

    $('#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,] 之一

  • 39

    另一种可能性是使用带有 data 属性的选项,如下所示(最短日期为1周前):

    <input class='datepicker' data-date-start-date="-1w">
    

    更多信息:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

  • 14

    我正在使用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'))
    });
    

相关问题