WdatePicker插件知识整理（一）

当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式。

1、支持多种调用模式

除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框。

常规调用：

<input id="d11" type="text" onClick="WdatePicker()"/>

图标触发：

<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">

注意:只需要传入控件的id即可

2、支持周显示

可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周

周显示简单应用：

<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>

利用onpicked事件把周赋值给另外的文本框：

<input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {
$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

3、只读开关,高亮周末功能

设置readOnly属性 true 或 false 可指定日期框是否只读

设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末

4、操作按钮自定义

清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true

禁用清空功能：

最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉

<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

5、自定义星期的第一天(4.6新增)

各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.

相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类推

以星期一作为第一天：

<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/>

6、平面显示

日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上

<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
</script>

后面的函数是显示选择日期

7、支持多种容器

除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素

将日期返回到<span>中：

<span id="demospan">2008-01-01</span>
<img onClick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" 
align="absmiddle" style="cursor:pointer" />

8、起始日期功能

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题

起始日期简单应用：

默认的起始日期为 1980-05-01

当日期框为空值时,将使用 1980-05-01 做为起始日期

<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>

alwaysUseStartDate属性应用：

默认的起始日期为 1980-05-01

当日期框无论是何值,始终使用 1980-05-01 做为起始日期

<input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>

使用内置参数：

除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)

下例演示,年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间

<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>

取得系统可识别的日期值(重要)：

类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05

<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<input id="d244_2" type="text" />

注意:在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框

关键属性: vel 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)

9、日期范围限制

1)静态限制

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围

<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-03-09 11:00:00"/>

2）动态限制

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天

动态变量表

格式	说明
%y	当前年
%M	当前月
%d	当前日
%ld	本月最后一天
%H	当前时
%m	当前分
%s	当前秒
{}	运算表达式,如:{%d+1}:表示明天
#F{}	{}之间是函数可写自定义JS代码

3）脚本自定义限制

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制

前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01：

<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

前面的日期+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小时

前面的日期+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天

发挥你的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})"/>

4）无效天

可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)

禁用 周六 所对应的日期：

<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

禁用周六周日所对应的日期：

<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

5）无效日期

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥

用法(正则匹配):

如果你熟悉正则表达式,会很容易理解下面的匹配用法

如果不熟悉,可以参考下面的常用示例

['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点 (注意 : 需要 使用 \: )

禁用 每个月份的 5日 15日 25日：

<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

注意 :'5$' 表示以 5 结尾注意 $ 的用法

禁用 所有早于2000-01-01的日期：

<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

注意:'^19' 表示以 19 开头注意 ^ 的用法

当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法

配合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]$']})"/>

0[4-7]$：4号~7号

1[1-5]$：11号~15号

2[58]$：25号，18号

6）有效日期

使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.

关键属性: opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用

只启用 每个月份的 5日 15日 25日：

<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>

7）特殊天和特殊日期

特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效

关键属性:

specialDays (0至6 分别代表 周日至周六) 用法同无效天

specialDates 用法同无效日期,但是对时分秒无效

高亮每周 周一 周五：

<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

posted on 2016-12-11 16:16 菜鸟Z 阅读(332) 评论(0) 编辑收藏举报

刷新页面返回顶部

WdatePicker插件知识整理（一）

1、支持多种调用模式

2、支持周显示

3、只读开关,高亮周末功能

4、操作按钮自定义

5、自定义星期的第一天(4.6新增)

6、平面显示

7、支持多种容器

8、起始日期功能

9、日期范围限制

1)静态限制

2）动态限制

3）脚本自定义限制

4）无效天

6）有效日期

7）特殊天和特殊日期

导航

公告