我需要使用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 回答
Bootstrap datepicker能够设置日期范围 . 但它在初始版本/ Master Branch中不可用 . 在那里检查分支'range'(或者只看https://github.com/eternicode/bootstrap-datepicker),你可以使用startDate和endDate来完成 .
例:
使用可选择的日期范围,您可能希望使用类似的东西 . 我的解决方案阻止选择#from_date大于#to_date,并在每次用户在#from_date框中选择新日期时更改#to_date startDate:
http://bootply.com/74352
JS档案:
HTML:
并且不要忘记包括bootstrap datepicker.js和.css文件 .
上面的例子可以简化一点 . 此外,您可以从键盘手动输入日期,而不是仅通过datepicker选择日期 . 清除值时,还需要处理'on clearDate'动作以删除startDate / endDate边界:
JS档案:
HTML:
大多数答案和解释并不是要解释什么是
endDate
或startDate
的有效字符串 . 丹尼给了我们两个有用的例子 .但为什么呢?让我们来看看
bootstrap-datetimepicker.js
的源代码 . 有一些代码开始第1343行告诉我们它是如何工作的 .有四种表达方式 .
w
表示一周m
表示月份y
表示年份d
表示日看一下正则表达式
^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$
. 你可以做的不仅仅是-0d
或+1m
.尝试更加像
startDate:'+1y,-2m,+0d,-1w'
. 分隔符,
可能是[\f\n\r\t\v,]
之一另一种可能性是使用带有
data
属性的选项,如下所示(最短日期为1周前):更多信息:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
我正在使用v3.1.3,我不得不像这样使用
data('DateTimePicker')