Beta3 更新和修正的内容(可以用于项目)
演示地址: http://dpdemo.my97.net
下载地址(仅20K): https://files.cnblogs.com/my97/My97DatePicker.rar
下载2: http://www.my97.net/dp/down/My97DatePicker.rar
My97日期控件 My97 DatePicker Ver 4.0 Beta3
Beta3 更新和修正的内容
Beta3 新功能演示
alwaysUseStartDate属性,增强startDate功能的灵活性
1. 无论日期是多少,都使用1980-02-01作为起始日期
<input type="text" id="bd161" onclick="WdatePicker({startDate:'1980-02-01',alwaysUseStartDate:true})"/>
2. 可以利用%y,%M等内置参数,实现部分值始终使用默认值,其他值使用日期框的值
下例演示,时分秒始终使用00:00:00作为起始时间
<input type="text" id="bd162" onFocus="WdatePicker({startDate:'%y-%M-%d 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
年份格式yyy和年份差量属性yearOffset,可实现民国年日历和其他特殊日历
注意:年份格式设置成yyy时,真正的日期将会减去一个差量yearOffset(默认值为:1911),如果是民国年使用默认值即可无需另外配置,如果是其他的差量,可以通过参数的形式配置
<input type="text" id="bd11" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>
Beta2 更新和修正的内容
Beta2 新功能演示
平面模式(通过设置eCont实现)
代码:
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr()())}})
</script>
增强的startDate
见示例1-6-2
支持<textarea>,<p>,<div>,<span>等作为显示控件
将日期返回到<span>中
2008-01-01 
代码:
<span id="demospan">2008-01-01</span>
<img src="http://www.cnblogs.com/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" onClick="WdatePicker({el:'demospan'})" />
position的功能得到增强,可动态设置,并能自定义位置
position的详细用法见配置说明中有关position的说明
下面的例子演示,使用positon属性指定,弹出日期的坐标为{left:100,top:50}
<input type="text" onclick="WdatePicker({position:{left:100,top:50}})"/>
el:this 可省略
下面的示例中的 el:this都已经被省略,这里不再演示了
日期框设置为disabled时禁止更改日期(不弹出选择框)
下面示例在onpicked事件里面加入了,设置disabled为true的代码,所以,在选择了一次以后就不能再使用了
只能选择一次日期,要重选日期,必须重新装载一次页面
<input type="text" onClick="WdatePicker({onpicked:function(){this.disabled=true;}})"/>
一. 注意事项和简介
1. My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
2. My97DatePicker.htm是必须文件,不可删除
3. 各目录及文件的用途:
WdatePicker.js(配置文件,在调用的地方仅需使用该文件)
config.js(语言和皮肤配置文件) calendar.js(日期库主文件) My97DatePicker.htm(临时页面文件,不可删除)
目录lang(存放语言文件) 目录skin(存放皮肤的相关文件)
4. 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
二. 功能介绍
1. 人性化的功能
1.1 支持多种调用模式
示例1-1-1(常规调用):
<input id="d11" type="text" onfocus="WdatePicker()"/>
示例1-1-2(图标触发):
<input id="d12" type="text"/>
<img src="../skin/datePicker.gif" width="16" height="22" align="absmiddle" onclick="WdatePicker({el:$dp.$('d12')})">
注:$dp.$ 相当于 document.getElementById
1.2 支持周显示
示例1-2-1:
<input id="d121" type="text" onclick="WdatePicker({isShowWeek:true})"/>
示例1-2-2 利用onpicked事件把周赋值给 另外的文本框 d122_1
您选择了第 (W格式)周, 另外您可以使用WW格式: 周
<input id="d122" type="text" onFocus="WdatePicker({isShowWeek:true,onpicked:function(){$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>
$dp.cal.getP 的用法详见 内置函数
1.3 下拉,输入,导航选择日期
年月时分秒输入框都具备以下3个属性
通过导航图标选择
直接使用键盘输入数字
直接从弹出的下拉框中选择
另:年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框
| 格式 | 说明 |
| y | 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。 |
| yy | 同上，如果小于两位数，前面补零。 |
| yyy | 将年份表示为三位数字。如果少于三位数，前面补零。 |
| yyyy | 将年份表示为四位数字。如果少于四位数，前面补零。 |
| M | 将月份表示为从 1 至 12 的数字 |
| MM | 同上，如果小于两位数，前面补零。 |
| d | 将月中日期表示为从 1 至 31 的数字。 |
| dd | 同上，如果小于两位数，前面补零。 |
| H | 将小时表示为从 0 至 23 的数字。 |
| HH | 同上，如果小于两位数，前面补零。 |
| m | 将分钟表示为从 0 至 59 的数字。 |
| mm | 同上，如果小于两位数，前面补零。 |
| s | 将秒表示为从 0 至 59 的数字。 |
| ss | 同上，如果小于两位数，前面补零。 |
| w | 返回星期对应的数字 0 (星期天) - 6 (星期六) 。 |
| D | 返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。 |
| W | 返回周对应的数字 (1 - 53) 。 |
| WW | 同上，如果小于两位数，前面补零 (01 - 53) 。 |
示例
| 格式字符串 | 值 |
| yyyy-MM-dd HH:mm:ss | 2008-03-12 19:20:00 |
| yy年M月 | 08年3月 |
| yyyyMMdd | 20080312 |
| 今天是:yyyy年M年d HH时mm分 | 今天是:2008年3月12日 19时20分 |
| H:m:s | 19:20:0 |
| y年 | 8年 |
示例 1-4-1: 年月日时分秒
<input id="d141" type="text" class="Wdate" style="width:300px" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})"/>
示例 1-4-2 时分秒
<input id="d142" type="text" class="Wdate" onFocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" value=""/>
示例 1-4-3 年月
<input id="d143" type="text" class="Wdate" onFocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})" value=""/>
示例 1-4-4 年月日时分
<input id="d144" type="text" class="Wdate" onFocus="WdatePicker({isShowOthers:true,dateFmt:'yy-M-d H:m'})" value=""/>
注意:当年月日中间没有分隔符时,一定要使用yyyyMMdd格式,不能使用使用其他格式(yyyyMd)
否则会导致不能正确识别类似2008112(歧义)之类的日期
1.6 起始日期功能
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致
相关属性:minDate(最小日期) maxDate(最大日期) realDateFmt(限制日期的格式) realTimeFmt(限制时间的格式) realFullFmt(时间日期格式)
示例1-6-1 有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,可以用起始日期功能轻松应对
默认的起始日期为 1980-05-01
<input type="text" id="d161" onFocus="WdatePicker({startDate:'1980-05-01'})"/>
示例1-6-2 起始日期除了可以静态指定以外,还可以动态指定,具体用法与日期限制里面的动态显示相同,你可以参考那里的写法
默认的起始日期为 %y-%M-01
<input type="text" id="d162" onFocus="WdatePicker({startDate:'%y-%M-01'})"/>
1.7 只读开关,高亮周末功能
设置readOnly属性 true 或 false 可指定日期框是否只读
设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末
1.8 操作按钮自定义
清空按钮 和 今天按钮,可以根据需要进行自定义 它们分别对应isShowClear 和 isShowToday 默认值都是true
示例1-8 禁用清空功能(最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉)
<input type="text" id="d18" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>
1.9 其他
1.9.1 日期图标
当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式.
在此以下的demo里都会加上class="Wdate"
1.9.2 显示其他月的日期
设置isShowOthers属性 true 或 false 可指定是否显示其他月的日期
注意:默认情况lang='auto',即根据浏览器的语言自动选择语言.
示例2-1-1(繁体中文):
<input id="d211" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})"/>
示例2-1-2(英文):
<input id="d212" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})"/>
示例2-1-3(简体中文):
<input id="d213" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})"/>
3. 支持自定义皮肤和动态切换皮肤
示例3-1-1 默认皮肤default: skin:'default'
示例3-1-2 whyGreen皮肤: skin:'whyGreen'
注意:'whyGreen'要带上单引号,因为是字符串
<input id="d312" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>
4.日期范围限制
注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配
相关属性:minDate(最小日期) maxDate(最大日期) realDateFmt(限制日期的格式) realTimeFmt(限制时间的格式) realFullFmt(时间日期格式)
4.1 静态限制
示例 4-1-1(限制日期的范围是 2006-09-10到2008-12-20 ):
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>
示例 4-1-2(限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30 ):
<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-3-9 11:0:0"/>
示例 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'})"/>
| 格式 | 说明 |
| %y | 当前年 |
| %M | 当前月 |
| %d | 当前日 |
| %ld | 本月最后一天 |
| %H | 当前时 |
| %m | 当前分 |
| %s | 当前秒 |
| #{} | 运算表达式,如:#{%d+1}:表示明天 |
| #F{} | {}之间是函数可写自定义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'})"/>
示例 4-3-1 使用了自定义函数 前面的日期不能大于后面的日期 且两个日期都不能大于 2020-10-01
注意:两个日期的日期格式必须相同
合同有效期从 到
注意: $dp.$ 相当于 document.getElementById 函数.
那么为什么里面的 ' 使用 \' 呢? 那是因为 " 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.
所以您在其他地方使用时注意把 \' 改成 " 或者 ' 来使用.
注意:#F{$dp.$(\'d4312\').value||\'2020-10-01\'} 表示当 d4312 为空时, 采用 2020-10-01 的值作为最大值
<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$(\'d4312\').value||\'2020-10-01\'}'})"/>
<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$(\'d4311\').value}',maxDate:'2020-10-01'})"/>
示例 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分别代表年月日时分秒
如 {M:5,d:7} 表示 五个月零7天
{y:1,d:-3} 表示 1年少3天
{d:1,H:1} 表示一天多1小时
示例 4-3-3 使用了自定义函数 前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3
住店日期从 到
<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>
注意:#F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}
表示当 d4332 为空时, 采用 $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作为最大值
使用 $dp.$DV 函数 可以将显式传入的值,加上定义的日期差量:
两个参数: value={字符类型}需要处理的值 , obj={对象类型}日期差量
用法同上面的 $dp.$D 类似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3减去3月零2天
示例 4-3-4 使用了自定义函数 发挥你的JS才能,定义任何你想要的日期限制
自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的
<script>
//返回一个随机的日期
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;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
注意下面几个重要的指针,将对你的编程带来很多便利
this: 指向文本框
dp:指向$dp
dp.cal: 指向日期控件对象
注意:函数原型必须使用类似 function(dp){} 的模式,这样子,在函数内部才可以使用dp
示例 5-1-1 使用onclearing事件取消清空操作的例子 (使用了 this.value 和 return true;)
<input type="text" class="Wdate" id="d511" onFocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?'))return true;}})"/>
注意:当onclearing函数返回true时,系统的清空事件将被取消,
函数体里面没有引用$dp,所以函数原型里面可以省略参数dp
示例 5-1-2 使用cal对象取得当前日期所选择的月份(使用了 dp.cal )
<input type="text" class="Wdate" id="d512" onFocus="WdatePicker({oncleared:function(dp){alert('当前日期所选择的月份为:'+$dp.cal.date.M);}})"/>
示例 5-1-3 综合使用两个事件的例子
<script>
function d512_focus(element){
var clearingFunc = function(){ if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?')) return true; }
var clearedFunc = function(){ alert('日期框已被清空'); }
WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc})
}
</script>
<input type="text" class="Wdate" id="d513" onFocus="d512_focus(this)"/>
示例 5-2-1 使用 onpicking事件 的例子
<input type="text" class="Wdate" id="d521" onFocus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要覆盖吗?')) return true;}})"/>
示例 5-2-2 使用onpicked实现日期选择联动(选择第一个日期的时候,第二个日期选择框自动弹出)
合同有效期从 到
注意下面第一个控件代码的写法:
<input id="d5221" class="Wdate" type="text" onFocus="var d5222=document.getElementById('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:d5222.value})"/>
<input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$(\'d5221\').value}'})"/>
6. 跨无限级框架显示(可无限跨越框架(iframe),无论怎么嵌套框架都不必担心了)
7. 支持日期和时间的编辑,编辑时自动跳转到对应日期和时间
不知道您是否已经注意到,当日期框里面有值时,右下角的按钮会变成更新,
现在您可以尝试对下面框中的月份改为1,然后点击更新,你会发现日期由 2000-02-29 01:00:00 变为 2000-01-29 01:00:00
示例7-1:
8. 自动纠错功能,纠错处理可设置为3种模式 1.提示 2.自动纠错(默认) 3.标记
请在下面的日期框中填入一个不合法的日期(如:1997-02-29),再尝试离开焦点
示例8-1
示例8-2 超出日期限制范围的日期也被认为是一个不合法的日期
最大日期是2000-01-10 ,如果在下框中填入的日期 大于 2000-01-10(如2000-01-12)也会被认为是不合法的日期
示例8-3 使用无效天和无效日期功能限制的日期也被认为是一个不合法的日期
如:
2008-02-20 无效日期限制
2008-02-02 2008-02-09 2008-02-16 2008-02-23 无效天限制
都是无效日期
您可以尝试在下框中输入这些日期,并离开焦点
9. 快速选择功能
注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配
相关属性:qsEnabled(是否启用快速选择功能) quickSel(快速选择数据,可以传入5个快速选择日期,日期格式同min/maxDate)
示例 9-1 传入2个静态日期
注意:当传入的数据不足5个时,系统将自动补全
<input class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-1-10','2000-2-20']})"/>
示例 9-2 传入2个动态日期,1个静态日期(它本身还会自动生成2个日期)
<input id="d292" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-10-01','%y-%M-01','%y-%M-%ld']})"/>
10.1 无效天 可以使用此功能禁用周日至周六所对应的日期
相关属性:disabledDays (0至6 分别代表 周日至周六)
示例 10-1-1 禁用 周六 所对应的日期
<input id="d2a11" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>
示例 10-1-2 同时禁用 周六和周日 所对应的日期
<input id="d2a12" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>
10.2 无效日期 可以使用此功能禁用 您所指定的一个或多个 日期
注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配
相关属性:disabledDates
用法(正则匹配):
如果你熟悉正则表达式,会很容易理解下面的匹配用法
如果不熟悉,可以参考下面的常用示例
['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
['^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点 (注意 : 需要 使用 \: )
不再多举例了,尽情发挥你的正则才能吧!
示例 10-2-1 禁用 每个月份的 5日 15日 25日
<input id="d2a21" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
其中:'5$' 表示以 5 结尾 注意 $ 的用法
示例 10-2-2 禁用 所有早于2000-01-01的日期
其中:'^19' 表示以 19 开头 注意 ^ 的用法
当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法
示例 10-2-3 配合min/maxDate使用,可以把可选择的日期分隔成多段
本示例本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末
<input id="d2a23" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
示例 10-2-4 min/maxDate disabledDays disabledDates 三者配合使用 即使在要求非常苛刻的情况下也能满足需求
<input id="d2a24" 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]})"/>
示例 10-2-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}\:..\:..']})"/>
鼠标点击 小时输入框时,你会发现当然时间对应的前一个小时和后一个小时是灰色的
示例 10-2-6 #F{}也是可以使用的
本示例利用自定义函数 随机禁用0-23中的任何一个小时
<script>
function randomH(){
//产生一个随机的数字 0-23
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
}
</script>
<input type="text" class="Wdate" id="d2a26" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
| 属性 | 类型 | 默认值 | 说明 |
| 静态属性:只能在WdatePicker.js中配置,一般情况下,不建议您修改静态属性的值 | |||
| $wdate | bool | true | 是否自动引入Wdate类 设置为true时,可直接在引入WdatePicker.js的页面里使用 class="Wdate" Wdate可在skin目录下的WdatePicker.css文件中定义 建议使用默认值 |
| $dpPath | string | '' | 是否显示指定程序包的绝对位置,一般情况下为空即可(程序自动创建),该属性是为防止极其少数的情况下程序创建出错而设置的 设置方法: 如果,程序包所在http中的地址为 http://localhost/proName/My97DatePicker/ 则 $dpPath = '/proName/My97DatePicker/'; 建议使用默认值 |
| 可配置属性:可以在WdatePicker方法是配置 | |||
| position | object | {} | 日期选择框显示位置 注意:坐标默认单位是px,是相对当前框架坐标(不受滚动条),left属性只接受数字,top属性除接受数字外还可以接受 'above' 上方显示, 'under' 下方显示, 'auto' 系统根据页面大小自动选择(默认) 如: {left:100,top:50}表示固定坐标[100,50] {top:50}表示横坐标自动生成,纵坐标指定为 50 {left:100}表示纵坐标自动生成,横坐标指定为 100 {top:'above'}表示上方显示 {top:'under'}表示下方显示 请参考示例 |
| lang | string | 'auto' | 当值为'auto'时 自动根据客户端浏览器的语言自动选择语言 当值为 其他 时 从langList中选择对应的语言 语言的相关配置请参考config.js |
| skin | string | 'default' | 皮肤名称 默认自带 default和whyGreen两个皮肤 另外如果你的css够强的话,可以自己做皮肤 皮肤的相关配置请参考config.js |
| dateFmt | string | 'yyyy-MM-dd' | 日期显示格式 详见:示例 1.4 自定义格式 |
| realDateFmt | string | 'yyyy-MM-dd' | 计算机可识别的,真正的日期格式 无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配 建议使用默认值 |
| realTimeFmt | string | 'HH:mm:ss' | |
| realFullFmt | string | '%Date %Time' | |
| minDate | string | '1900-01-01 00:00:00' | 最小日期(注意要与上面的real日期相匹配) |
| maxDate | string | '2099-12-31 23:59:59' | 最大日期(注意要与上面的real日期相匹配) |
| startDate | string | '' | 起始日期,既点击日期框时显示的起始日期 为空时,使用今天作为起始日期(默认值) 否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配) 详见:示例 1.6 起始日期功能 |
| isShowWeek | bool | false | 是否显示周 详见:示例 1.2 支持周显示 |
| highLineWeekDay | bool | true | 是否高亮显示 周六 周日 |
| isShowClear | bool | true | 是否显示清空按钮 |
| isShowToday | bool | true | 是否显示今天按钮 |
| isShowOthers | bool | true | 为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示 |
| readOnly | bool | false | 是否只读 |
| errDealMode | int | 0 | 纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 |
| autoPickDate | bool | null | 为false时 点日期的时候不自动输入,而是要通过确定才能输入 为true时 即点击日期即可返回日期值 为null时(推荐使用) 如果有时间置为false 否则置为true |
| qsEnabled | bool | true | 是否启用快速选择功能 |
| quickSel | Array | null | 快速选择数据,可以传入5个快速选择日期 注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配 详见:示例 9. 快速选择功能 |
| disabledDays | Array | null | 可以使用此功能禁用周日至周六所对应的日期 0至6 分别代表 周日至周六 详见:示例 10.1 无效天 |
| disabledDates | Array | null | 可以使用此功能禁用所指定的一个或多个日期 详见:示例 10.2 无效日期 |
| onpicking | function | null | 此四个参数为事件参数 详见:示例 5. 自定义事件 |
| onpicked | function | null | |
| onclearing | function | null | |
| oncleared | function | null | |
//语言列表
//name: 语言名,它必须与lang目录下的文件名对应
//charset: 语言文件.js 所使用的编码格式
var langList =
[
{name:'en', charset:'UTF-8'},
{name:'zh-cn', charset:'gb2312'},
{name:'zh-tw', charset:'GBK'}
];
//皮肤列表
//name: 皮肤所对应的目录名
//charset: 皮肤文件.css 所对应的编码格式
var skinList =
[
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'}
];
四. 如何使用
1. 在使用该日期控件的文件中加入JS库(仅这一个文件即可,其他文件会自动引入,请勿删除或改名), 代码如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 请根据你的实际情况改变路径
2. 加上主调函数 WdatePicker
关于 WdatePicker 的用法:
如果您是新手,对js还不是很了解的话
您可以参考 上面的功能介绍(人性化的功能),
那里都是最简单的调用,并且每一个演示的示例下面都有相关代码,并且 关键属性用蓝字标出,关键值用红字标出 应该很容易看明白
如果您有一定的水准
希望能从头到尾把功能介绍好好看一遍,这样大部分功能你都会用了
如果您是高手
建议您通读配置说明和内置函数
| 函数名 | 原型 | 作用域 | 参数 | 描述 |
| $dp.$ | $dp.$(el) : Element | 全局 | el [string]: 对象的ID | 相当于document.getElementById 参考 示例 1-1-2 |
| $dp.$D | $dp.$D(id, arg) : String | 全局 | id [string]: 对象的ID arg [object]: 日期差量,可以设置成 {y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]} 属性 y,M,d,H,m,s 分别代表 年月日时分秒 {M:3,d:7} 表示 3个月零7天 {d:1,H:1} 表示1天多1小时 |
将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串 参考 示例 4-3-2 |
| $dp.$DV | $dp.$D(v, arg) : String | 全局 | v [string]: 日期字符串 arg [object]: 同上例的arg |
将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串 参考 示例 4-3-3 |
| 以下函数只在事件自定义函数中有效 | ||||
| $dp.cal.getP | $dp.cal.getP(p, f) : String | 事件function | p [string]: 属性名称 yMdHmswWD分别代表年,月,日,时,分,秒,星期(0-6),周(1-52),星期(一-六) f [string]: format 格式字符串 设置方法参考 1.4 自定义格式 |
返回所指定属性被格式字符串格式化后的值[单属性] 参考 示例 1-2-2 |
| dp.cal.getDateStr | dp.cal.getDateStr(f) : String | 事件function | f [string]: 格式字符串,为空时使用dateFmt |
返回所指定属性被格式字符串格式化后的值[整个值] |
| 完善中 | 完善中 | 完善中 | 完善中 | 完善中 |
任何问题,请先参考blog里的帖子 My97 DatePicker 4.0 疑难解答(实时更新)
如果找不到答案,您可以直接在blog留言,或者通过下面的联系方式与我联系
* 如果您在使用过程中遇到问题,或者有更好的建议
* 欢迎您访问
* BLOG: http://blog.csdn.net/my97/
* MAIL: smallcarrot@163.com
* 有问题在我blog留言或给我Email吧,最好先仔细看说明,很多问题都是因为没有仔细看说明导致的
Yahoo!Stat.
浙公网安备 33010602011771号