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

Posted 2023-02-22

【中文标题】如何限制 Bootstrap Datepicker 中的可选日期范围？

【英文标题】：How to restrict the selectable date ranges in Bootstrap Datepicker?

【发布时间】：2012-08-09 14:46:30

【问题描述】：

我需要使用 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 那样可配置。谁能帮我限制新日期选择器中的可选日期范围。

【问题讨论】：

如果 jQuery datepicker 除了样式也可以工作，关闭这些样式可能比将不存在的功能添加到不同的库更容易。查看jqueryui.com/demos/datepicker上的“主题”标签

也许this 的回答会对你有所帮助。

【参考方案1】：

Bootstrap 日期选择器可以设置日期范围。但它在初始版本/主分支中不可用。在那里将分支检查为“范围”（或仅查看https://github.com/eternicode/bootstrap-datepicker），您可以简单地使用 startDate 和 endDate 来完成。

例子：

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

【讨论】：

@NandhakumarSri 给你 - github.com/eternicode/bootstrap-datepicker。存储库的树结构发生了一些变化，导致答案链接失效。

'-2m' 和 +2d 是什么意思

@GauravAggarwal 以防万一..应该是月（m）和天（d）；即，有效日期是今天之前的 2 个月到今天之后的 2 天

【参考方案2】：

对于可选择的日期范围，您可能想要使用类似的东西。我的解决方案阻止选择大于 #to_date 的 #from_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 文件。

【参考方案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">

【讨论】：

有效！！！请注意 .valueOf() 对我不起作用，因为 datepicker 检查 setStartDate 中的日期。

2020 年了，你的代码还在工作！顺便问一下.to_date怎么加1天？？？

【参考方案4】：

大多数答案和解释都不是为了解释什么是endDate 或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,]之一

【讨论】：

这是正确而完美的答案。接受的答案可能已经解决了提问者的问题，但提供更多关于解决方案的描述会增加它的价值。

【参考方案5】：

另一种可能性是使用带有data 属性的选项，如下所示（至少提前 1 周日期）：

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

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

【参考方案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'))
);

【参考方案7】：

<script type="text/javascript">

$(document).ready(function() $("#submitdate").datepicker( 分钟日期：0， 最大日期：0，

    dateFormat: "yy-mm-dd",
  
);