插件下载地址：
https://download.csdn.net/download/lianzhang861/10433412
此日期插件功能还可以，用着挺顺手
目前的版本是:4.8 正式版
My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
My97DatePicker.htm是必须文件,不可删除
各目录及文件的用途:
WdatePicker.js 配置文件,在调用的地方仅需使用该文件
config.js 语言和皮肤配置文件
calendar.js 日期库主文件)
目录lang 存放语言文件
目录skin 存放皮肤的相关文件当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
<input type="text" style="margin-top:100px;" id="stime" class="Wdate" οnclick="dateClick()"> 加上这个class=“Wdate”后input会增加一个日历小图标，好看一些
关于WdatePicker的使用配置指南请参考此博客
https://blog.csdn.net/zengxin2008/article/details/7248964#m5
我的文章主要列举一下使用实例，代码如下：
<!DOCTYPE html><html><head><title>排行</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script type="text/javascript" src="../common/My97DatePicker/4.8/WdatePicker.js"></script></head><body style="background: #F0EFF5;"><button id="bb" onclick="dateClick()">代替点击对象</button><input type="text" style="margin-top:100px;" id="stime" class="Wdate" onclick="dateClick()"><input value="2018-5-22 00:00:00" id="stime1"><script>function dateClick() {WdatePicker({//el:$dp.$('stime'), //设置后不管是点谁触发的弹框都认为是stime绑定者弹出的，值赋给绑定者 dateFmt : 'yyyy-MM-dd HH:mm:ss', //格式设置相对应界面可选择也变化//skin:"default", //whyGreen绿色风格，twoer橙色风格，默认default//startDate:'%y-%M-01 00:00:00', //默认开始选中时间，格式必须和dateFmt中保持一致,例'2018-05-21 00:00:00'//lang:"en", //英文版本，默认为中文；:'en', charset:'UTF-8'；'zh-cn', charset:'gb2312'；'zh-tw', charset:'GBK'minDate: '#F{$dp.$D('stime1',{d:-10});}', //其中''中表示默认取id为stime1的值，注意stime1中的时间格式必须要dateFmt保持一致。第二个参数为调整日期，这里是向前调10天maxDate:'%y-%M-{%d+1} 23:59:59', //最大可选择时间，明天最后时刻// firstDayOfWeek: 1 //一周从周几开始，默认为0，周日开始highLineWeekDay:true, //周末的日期是否高亮readOnly:true, //是否允许键盘输入值，false为禁止输入，只能鼠标选//position:{left:100,top:50}}, //调整位置 }); }</script><script src="rank.js"></script></body></html>| 格式 | 说明 |
|---|---|
| %y | 当前年 |
| %M | 当前月 |
| %d | 当前日 |
| %ld | 本月最后一天 |
| %H | 当前时 |
| %m | 当前分 |
| %s | 当前秒 |
| #{} | 运算表达式,如:#{%d+1}:表示明天 |
| #F{} | {}之间是函数可写自定义JS代码 |
| 格式 | 说明 |
|---|---|
| %y | 当前年 |
| %M | 当前月 |
| %d | 当前日 |
| %ld | 本月最后一天 |
| %H | 当前时 |
| %m | 当前分 |
| %s | 当前秒 |
| #{} | 运算表达式,如:#{%d+1}:表示明天 |
| #F{} | {}之间是函数可写自定义JS代码 |
属性 类型 默认值 说明 静态属性:只能在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方法是配置 el Element 或 String null 指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值) vel Element 或 String null 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值) 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中选择对应的语言
你可以参考语言配置skin string 'default' 皮肤名称 默认自带 default和whyGreen两个皮肤
另外如果你的css够强的话,可以自己做皮肤
你可以参考皮肤配置dateFmt string 'yyyy-MM-dd' 日期显示格式
你可以参考自定义格式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日期相匹配)
你可以参考起始日期示例isShowWeek bool false 是否显示周
你可以参考周显示示例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 否则置为trueqsEnabled bool true 是否启用快速选择功能 quickSel Array null 快速选择数据,可以传入5个快速选择日期
注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配
你可以参考快速选择示例disabledDays Array null 可以使用此功能禁用周日至周六所对应的日期
0至6 分别代表 周日至周六
你可以参考无效天示例disabledDates Array null 可以使用此功能禁用所指定的一个或多个日期
你可以参考无效日期示例opposite bool false 默认为false, 为true时,无效天和无效日期变成有效天和有效日期
你可以参考有效天与有效日期示例onpicking function null 此四个参数为事件参数
你可以参考自定义事件示例onpicked function null onclearing function null oncleared function null
使用 $dp.$D 函数 可以将日期框中的值,加上定义的日期差量:
两个参数: id={字符类型}需要处理的文本框的id值 , obj={对象类型}日期差量
日期差量用法:
属性y,M,d,H,m,s分别代表年月日时分秒
补充：
最近有个需求是选择时间后就请求ajax，但是在事件选择上有问题
首先想到的是用onchange，但是选择完日期如果不点确定直接点别的地方话，虽然input值变了而且选择日期框消失了，但是不会触发onchange 方法，而且就算点了确定，还得onblur的时候才能触发。（此插件了重写了onchange方法）
然后试了试onblur方法，还是不好用
解决办法：用我上述的onpicked方法，这样选择后不定义确定也能秒触发
<input type="text" name="repairDate" value="${assessPunish.CREATE_TIME}" onFocus="WdatePicker({onpicked:loadDefaultNum,dateFmt : 'yyyy-MM',lang:'zh-cn'})" id="repairDate" class="input-text Wdate w100" autocomplete="off" >注意要将onpicked写在配置信息里，不是写在input里，而且里面的方法例如onpicked:loadDefaultNum不能加括号不能写成onpicked:loadDefaultNum（），否则会出现不管点什么都会调用方法的现象！！！
以上就是《My97DatePicker-WdatePicker日历日期插件详细示例》的详细内容，更多请关注 “设计在线”其它相关文章！
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论 0 条评论