今天在网站看到日期的格式限制，觉得很好，果断转载。
4. 日期范围限制
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围
示例4-1-1 限制日期的范围是 到
&input id=&d411& class=&Wdate& type=&text& onfocus=&WdatePicker({skin:'whyGreen',minDate:'',maxDate:''})&/&
示例4-1-2 限制日期的范围是
11:30:00 到
&input type=&text& class=&Wdate& id=&d412& onfocus=&WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'
11:30:00',maxDate:' 20:59:30'})& value=& 11:00:00&/&
示例4-1-3 限制日期的范围是 2008年2月 到 2008年10月
&input type=&text& class=&Wdate& id=&d413& onfocus=&WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})&/&
示例4-1-4 限制日期的范围是 8:00:00 到 11:30:00
&input type=&text& class=&Wdate& id=&d414& onfocus=&WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})&/&
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天
动态变量表
格式
本月最后一天
运算表达式,如:{%d+1}:表示明天
{}之间是函数可写自定义JS代码
示例4-2-1 只能选择今天以前的日期(包括今天)
&input id=&d421& class=&Wdate& type=&text& onfocus=&WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})&/&
示例4-2-2&使用了运算表达式&只能选择今天以后的日期(不包括今天)
&input id=&d422& class=&Wdate& type=&text& onfocus=&WdatePicker({minDate:'%y-%M-{%d+1}'})&/&
示例4-2-3 只能选择本月的日期1号至本月最后一天
&input id=&d423& class=&Wdate& type=&text& onfocus=&WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})&/&
示例4-2-4 只能选择今天7:00:00至明天21:00:00的日期
&input id=&d424& class=&Wdate& type=&text& onfocus=&WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1}
21:00:00'})&/&
示例4-2-5&使用了运算表达式&只能选择 20小时前 至 30小时后 的日期
&input id=&d425& class=&Wdate& type=&text& onClick=&WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d
{%H+30}:%m:%s'})&/&
脚本自定义限制
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制
示例4-3-1 前面的日期不能大于后面的日期且两个日期都不能大于
合同有效期从&&到&&
&input id=&d4311& class=&Wdate& type=&text& onFocus=&WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'\'}'})&/&&
&input id=&d4312& class=&Wdate& type=&text& onFocus=&WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:''})&/&
两个日期的日期格式必须相同
$dp.$ 相当于 document.getElementById 函数.
那么为什么里面的 ' 使用 \' 呢? 那是因为 & 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.
所以您在其他地方使用时注意把 \' 改成 & 或者 ' 来使用.
#F{$dp.$D(\'d4312\')||\'\'} 表示当 d4312 为空时, 采用
的值作为最大值
示例4-3-2 前面的日期+3天 不能大于 后面的日期
日期从&&到&&
&input type=&text& class=&Wdate& id=&d4321& onFocus=&WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})&/&
&input type=&text& class=&Wdate& id=&d4322& onFocus=&WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})&/&
使用&$dp.$D 函数&可以将日期框中的值,加上定义的日期差量:
两个参数:&id={字符类型}需要处理的文本框的id值&,&obj={对象类型}日期差量
日期差量用法:
属性y,M,d,H,m,s分别代表年月日时分秒
为空时,表示直接取值,不做差量(示例4-3-1中的参数就是空的)
{M:5,d:7} 表示 五个月零7天
{y:1,d:-3} 表示 1年少3天
{d:1,H:1} 表示一天多1小时
示例4-3-3 前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 减去3月零2天 后面日期 不能大于
住店日期从&&到&&
&input type=&text& class=&Wdate& id=&d4331& onFocus=&WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'\',{M:-3,d:-2})}'})&/&
&input type=&text& class=&Wdate& id=&d4332& onFocus=&WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:''})&/&
#F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'\',{M:-3,d:-2})}
表示当 d4332 为空时, 采用 $dp.$DV(\'\',{M:-3,d:-2})} 的值作为最大值
使用&$dp.$DV 函数&可以将显式传入的值,加上定义的日期差量:
两个参数:&value={字符类型}需要处理的值&,&obj={对象类型}日期差量
用法同上面的&$dp.$D&类似,如 $dp.$DV(\'\',{M:-3,d:-2}) 表示 减去3月零2天
示例4-3-4 发挥你的JS才能,定义任何你想要的日期限制
自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
&input type=&text& class=&Wdate& id=&d434& onFocus=&var date=randomDate();WdatePicker({minDate:date,maxDate:date})&/&
可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)
示例4-4-1 禁用 周六 所对应的日期
&input id=&d441& type=&text& class=&Wdate& onFocus=&WdatePicker({disabledDays:[6]})&/&
示例4-4-2 禁用 周六 周日 所对应的日期
&input id=&d442& type=&text& class=&Wdate& onFocus=&WdatePicker({disabledDays:[0,6]})&/&
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥
用法(正则匹配):&
如果你熟悉正则表达式,会很容易理解下面的匹配用法
如果不熟悉,可以参考下面的常用示例&
['',''] 表示禁用
['2008-..-01',''] 表示禁用 2008-所有月份-01 和
['200[0-8]]-02-01',''] 表示禁用 []-02-01 和
['^2006'] 表示禁用 2006年的所有日期
此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制&注意:%ld不能使用
['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天&
['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天
当然,除了可以限制日期以外,您还可以限制时间
['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意&:&需要 使用&\:&)
不再多举例了,尽情发挥你的正则才能吧!
示例4-5-1 禁用 每个月份的 5日 15日 25日
&input id=&d451& type=&text& class=&Wdate& onFocus=&WdatePicker({disabledDates:['5$']})&/&
注意 :'5$'&表示以 5 结尾 注意&$&的用法
示例4-5-2 禁用 所有早于的日期
&input id=&d452& type=&text& class=&Wdate& onFocus=&WdatePicker({disabledDates:['^19']})&/&
注意:'^19'&表示以 19 开头 注意&^&的用法&
当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法
示例4-5-3 配合min/maxDate使用,可以把可选择的日期分隔成多段
本示例本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末
&input id=&d453& type=&text& class=&Wdate& onFocus=&WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})&/&
示例4-5-4&min/maxDate disabledDays disabledDates 配合使用&即使在要求非常苛刻的情况下也能满足需求
&input id=&d454& type=&text& class=&Wdate& onFocus=&WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})&/&
示例4-5-5 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量
鼠标点击 小时输入框时,你会发现当然时间对应的前一个小时和后一个小时是灰色的
&input id=&d2a25& type=&text& class=&Wdate& onFocus=&WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d
{%H+1}\:..\:..']})&/&&
注意:%y %M %d等详见
示例4-5-6 #F{}也是可以使用的
本示例利用自定义函数 随机禁用0-23中的任何一个小时
打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同
function randomH(){
//产生一个随机的数字 0-23&
var H = Math.round(Math.random() * 23);
if(H&10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
&input type=&text& class=&Wdate& id=&d456& onFocus=&WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})&/&
使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.
关键属性:&opposite&默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用
示例4-6 只启用 每个月份的 5日 15日 25日
&input id=&d46& type=&text& class=&Wdate& onFocus=&WdatePicker({opposite:true,disabledDates:['5$']})&/&
注意 :'5$'&表示以 5 结尾 注意&$&的用法
特殊天和特殊日期
特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效
specialDays&(0至6 分别代表 周日至周六) 用法同无效天&
specialDates 用法同无效日期,但是对时分秒无效
示例4-7-1 高亮每周 周一 周五
&input id=&d471& type=&text& class=&Wdate& onFocus=&WdatePicker({specialDays:[1,5]})&/&
示例4-7-2 高亮每月 1号 15号
&input id=&d472& type=&text& class=&Wdate& onFocus=&WdatePicker({specialDates:['....-..-01','....-..-15']})&/&
本文已收录于以下专栏：
相关文章推荐
my97,时间控件, 选择多个日期
1.动态时间范围限制：
    可以通过系统给出的动态变量，如%y(当前年)，%M(当前月)等来限制日期范围，还可以通过{}进行表达式运算，如:{%d+1}：表示明天。
%y ...
首先是这篇博客很有用啊：
然后是官网的说明也不赖，官网有毒= =我也不知道为啥啊http://www.my97.net/dp/demo/resource/2.1.asp首先下载安装包，然后放在目录文...
My97DatePicker是一个更全面，更人性化，并且速度一流的日期选择控件。具有强大的日期范围限制功能；自定义事件和丰富的API库；多语言支持和自定义皮肤支持；跨无限级框架显示和自动选择显示位置。...
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 
1、下载My97DatePicker组件包 
下载地址：http://download.csdn.net/det...
My97相信大家都不陌生，应该是我所见过的最强大的一个日历控件了，最近的项目中也比较多
地用到了此控件，而且项目中经常会有不同时间范围的需求，在此列出一些比较常用的日期范围格式的设置，尽管在My97的...
WdatePicker[html] view plain copy print?
My97DatePicker引入到项目中后的目录结构如下
My97相信大家都不陌生，应该是我所见过的最强大的一个日历控件了，最近的项目中也比较多地用到了此控件，而且项目中经常会有不同时间范围的需求，在此列出一些比较常用的日期范围格式的设置，尽管在My97的官...
他的最新文章
讲师：刘文志
讲师：陈伟
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)12365人阅读
JQUERY插件（57）
JQuery.ui.Datepicker是一个很强大的日期选择控件，定制性很强。朱最近在做一个旅馆预订的小功能，要求用户在填写订单选择入住日期时，要将已经被预订出的日期置为不可用，查些资料，看看JS，原来可以使用beforeshowday来控制每一天的格式。主要代码如下：
“CLOSED”貌似是Datepicker内置的一个什么值，设置为&CLOSED&则当天的日期是不可选的。
ui.Datepicker.js里关于beforeShowDay的一些注释：
beforeShowDay: null, // Function that takes a date and returns an array with
// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
// [2] = cell title (optional), e.g. $.datepicker.noWeekends
A function that takes
a date as a parameter and must return an array with:
[0]:&true/false&indicating
whether or not this date is selectable
[1]: a CSS class name to add to the date's cell
or&&&&for the default presentation
[2]: an optional popup tooltip for this date
第三个参数可以在该日期上显示title，提示节假日名称。（比如国庆）
return [false, 'customCss','国庆']; &
现在考虑我自己的应用，我现在要做淡旺季的价格表，如果选择旺季，日期就不能选择非旺季的日期，淡季和平季也是如此。
这样乍看起来需要界定一个日期范围，但是研究楼上的源代码后看到，只需要限定月份就行了。因为每个淡旺季的开头和结尾都是以自然月的1号和30号（31，28号）为结束的，所以数组那里只需要一个值，而不需要三个值来判断。对于一般的应用，最多也是需要两个，也就是日期和月份，年份几乎每年都一样。
另外一个变通点，起始日期的选择。如果旺季开始于7月，当前日期是5月，那么日历的起始日期应该是7月1日。如果当前日期正好处于旺季，那么就从当天开始作为日期的起始点。
第三，我必须要从一个隐藏元素中获取当前的季节特征，淡季，平季还是旺季，不同的季节有不同的价格。那么因为各个浏览器对于浏览器加载元素的时机不同，所以决定放在jquery的$(function(){});里面。
于是就有了如下的js
[javascript]&
/* create an array of days which need to be disabled */
var disabledDays = [&2-21-2010&,&2-24-2010&,&2-27-2010&,&2-28-2010&,&3-3-2010&,&3-17-2010&,&4-2-2010&,&4-3-2010&,&4-4-2010&,&4-5-2010&];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i & disabledDays. i++) {
if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() & date) {
//console.log('bad:
' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
//console.log('good:
' + (m+1) + '-' + d + '-' + y);
return [true];
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noW
/* taken from mootools */
function ArrayIndexOf(array,item,from){
var len = array.
for (var i = (from & 0) ? Math.max(0, len + from) : from || 0; i & i++){
if (array[i] === item)
return -1;
/* taken from mootools */
function ArrayContains(array,item,from){
return ArrayIndexOf(array,item,from) != -1;
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(),
maxDate: new Date(),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7845857次
积分：67319
积分：67319
排名：第29名
原创：254篇
转载：2718篇
评论：717条
(21)(92)(73)(46)(17)(25)(37)(63)(7)(74)(71)(6)(20)(27)(54)(97)(74)(32)(2)(24)(21)(62)(67)(95)(177)(113)(86)(40)(43)(71)(14)(10)(17)(12)(60)(36)(23)(27)(46)(34)(76)(63)(121)(141)(74)(54)(120)(77)(42)(4)(12)(19)(1)(9)(15)(19)(18)(16)(31)(79)(68)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'1997人阅读
ios-基础（23）
UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, __kScreenWidth, __kDatePickerH)];
datePicker.backgroundColor = [UIColor whiteColor];
[datePicker setDatePickerMode:UIDatePickerModeDate];
[datePicker setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"zh_Hans_CN"]];
[datePicker addTarget:self action:@selector(dateChanged:) forControlEvents:UIControlEventValueChanged];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"yyyy-MM-dd"];
NSDate *date = [dateFormatter dateFromString:lastTime];
if (!lastTime) {
date = [NSDate date];
[datePicker setDate:date];
timeDate=[NSDate date];
NSDateFormatter *fmt = [[NSDateFormatter alloc] init];
fmt.dateFormat = @"yyyy-MM-dd";
NSDate *minDate = [fmt dateFromString:@""];
datePicker.maximumDate = timeD
datePicker.minimumDate = minD
[datePicker setValue:kColor3C3C3C forKeyPath:@"textColor"];
[self addSubview:datePicker];
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：164600次
积分：2327
积分：2327
排名：第17027名
原创：105篇
转载：17篇
评论：24条
(3)(1)(2)(12)(1)(10)(4)(7)(10)(10)(14)(7)(4)(8)(2)(6)(6)(4)(1)(7)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'bootstrap datepicker限定可选时间范围实现方法
作者：弓长步又
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了bootstrap datepicker限定可选时间范围的实现方法，本文涉及到相关知识点，通过实例给大家介绍的非常详细,需要的朋友可以参考下
一、应用场景
实际应用中可能会根据日期字段查询某个日期范围内的数据，则需要对日期选择器可选时间进行限制，
如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。
二、相关知识点
1、bootstrap-datepicker的初始化
引入bootstrap-datepicker.js和bootstrap-datepicker.css
bootstrap-datepicker配置参数的了解
2、boostrap-datepicker的changeDate事件：日期改变时触发
3、bootstrap-datepicker的setEndDate和setStartDate方法
4、详细配置参见官方文档
三、应用实例
1、JSP中，声明日期选择器
&span style="font-size:14"&&div class="col-md-6 cy-text-right-md"&
&div class="form-inline"&
&div class="form-group cy-mar-ver-s"&
&span class="cy-pad-hor-s"&最后接入时间&/span&
&div class="input-daterange input-group" id="datepicker"&
&input type="text" class="form-control" name="start" id="qBeginTime" /&
&span class="input-group-addon"&至&/span&
&input type="text" class="form-control" name="end" id="qEndTime" /&
&div class="form-group cy-mar-ver-s"&
&button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button"&搜索&/button&
&/div&&/span&
2、JS中，对日期选择器进行初始化和配置
&span style="font-size:14"& //开始时间：
$('#qBeginTime').datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date()
}).on('changeDate',function(e){
var startTime = e.
$('#qEndTime').datepicker('setStartDate',startTime);
//结束时间：
$('#qEndTime').datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date()
}).on('changeDate',function(e){
var endTime = e.
$('#qBeginTime').datepicker('setEndDate',endTime);
});&/span&
以上所述是小编给大家介绍的bootstrap datepicker限定可选时间范围实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具