My97DatePicker-WdatePicker⽇历⽇期插件详细⽰例
插件下载地址：
此⽇期插件功能还可以，⽤着挺顺⼿
⽬前的版本是:4.8 正式版
My97DatePicker⽬录是⼀个整体，不可破坏⾥⾯的⽬录结构，也不可对⾥⾯的⽂件改名，可以改⽬录名
My97DatePicker.htm是必须⽂件，不可删除
各⽬录及⽂件的⽤途:
WdatePicker.js 配置⽂件，在调⽤的地⽅仅需使⽤该⽂件
config.js 语⾔和⽪肤配置⽂件
calendar.js ⽇期库主⽂件)
⽬录lang 存放语⾔⽂件
⽬录skin 存放⽪肤的相关⽂件
input绑定onblur事件当WdatePicker.js⾥的属性:$wdate=true时，在input⾥加上class="Wdate"就会在选择框右边出现⽇期图标，如果您不喜欢这个样式，可以把class="Wdate"去掉，另外也可以通过修改skin⽬录下的WdatePicker.css⽂件来修改样式
<input type="text"    id="stime" class="Wdate" οnclick="dateClick()"> 加上这个class=“Wdate”后input会增加⼀个⽇历⼩图标，好看⼀些
关于WdatePicker的使⽤配置指南请参考此博客
我的⽂章主要列举⼀下使⽤实例，代码如下：
<!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 >
<button id="bb" onclick="dateClick()">代替点击对象</button>
<input type="text"    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保持⼀致。第⼆个参数为调整⽇期，这⾥  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代码
1.
属性类型默认值说明
静态属性：只能在WdatePicker.js中配置,⼀般情况下，不建议您修改静态属性的值
$wdate bool true 是否⾃动引⼊Wdate类 设置为true时，可直接在引⼊WdatePicker.js的页⾯⾥使⽤class="Wdate"
Wdate可在skin⽬录下的WdatePicker.css⽂件中定义
建议使⽤默认值
$dpPath string''是否显⽰指定程序包的绝对位置,⼀般情况下为空即可(程序⾃动创建)，该属性是为防⽌极其少数的情况下程序创建出错⽽设置的
设置⽅法:
如果，程序包所在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 否则置为true
qsEnabled 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（），否则会出现不管点什么都会调⽤⽅法的现象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。