My97DatePicker日历插件
My97DatePicker具有强大的日期功能，能限制日期范围，对于编写双日历比较简便。
注意事项：
My97DatePicker目录是一个整体，不可以破坏
My97DatePicker.html 是必须的文件 不可以删除
各个目录及文件的用途
WdatePicker.js 配置文件 可多个共存
config.js 语言和皮肤配置文件 （可以不引入）
calendar.js 日期库主文件（可以不引入）
1、正常调用
<input id="demo1" type="text" onClick="WdatePicker()"/>
2、图标触发
<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">
注释：el为挂载元素 后面传入控件的id
3、支持周显示
<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>
4、利用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');}})"/>
5、只读开关，高亮周末显示
设置readOnly属性 true或false设置是否为只读模式
设置highLineWeekDay属性true或false可指定是否高亮周末
6、清空按钮和今天按钮的控制
需要自定义，分别对应isShowClear 和 isShowToday 默认值都为true
7、自定义弹出的位置
<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>
8、自定义日期的第一天
<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/>
9、起始日期
注意：日期格式必须与 realDateFmt 和realTimeFmt 一致
<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>
10、设置内置参数
<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
11、自定义样式
<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/>
<input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>
12、双日历
<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>
注意:双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true
日期范围限制
1、静态限制
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>
限制日期的范围是 2006-09-10到2008-12-20
<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"/>
限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30
<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>
限制日期的范围是 2008年2月 到 2008年10月
<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>
限制日期的范围是 8:00:00 到 11:30:00
2、动态限制
只能选择今天以前的日期(包括今天)
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>
使用了运算表达式 只能选择今天以后的日期(不包括今天)
<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
只能选择本月的日期1号至本月最后一天
<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>
只能选择今天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'})"/>
使用了运算表达式 只能选择 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'})"/>
3、脚本自定义限制
前面的日期不能大于后面的日期且两个日期都不能大于 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});}'})"/>
前面的日期+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'})"/>
4、无效天
<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>
5、无效日期
<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>
禁用 每个月份的 5日 15日 25日
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
禁用 所有早于2000-01-01的日期
<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
设置起始时间
<div class="control-group">
<label class="control-label">竞拍时间 : </label>
<div class="controls">
<input type="text" class="span6 m-wrap" name="tenderEndTime" id="bidTime" placeholder="请选择时间" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd HH:mm',readOnly:true,minDate:'%y-%M-%d H:%m'})" value="" required="required">
</div>
</div>
<div class="control-group">
<label class="control-label">采购截止时间 : </label>
<div class="controls">
<input type="text" class="span6 m-wrap" name="tenderEndTime" id="endTime" placeholder="请选择时间" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd HH:mm',readOnly:true,minDate:'#F{$dp.$D(\'bidTime\')}'})" value="" required="required">
</div>
</div>
<div class="control-group">
<label class="control-label">收货时间 : </label>
<div class="controls">
<input style="text-indent:10px;" id="reciveTime" class="span6 m-wrap" placeholder="请选择时间" name="deliveryStartTime" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM- dd',readOnly:true,minDate:'#F{$dp.$D(\'endTime\')}'})" required="required"/>
</div>
</div>
最新文章
- 界面设计技法之css布局
- ACE的 日志
- realloc，c语言
- 【bzoj3772】精神污染
- 【Java学习笔记之八】java二维数组及其多维数组的内存应用拓展延伸
- JavaScript笔记之第六天
- Linux安装解压缩版jdk
- Springmvc_validation 效验器
- Xcode 上传代码到GitHub
- P1013
- Macaca环境配置及样例执行
- Spring Boot - AOP（面向切面）-切入点表达式
- 关于thinkphp5URL重写
- 移动端网页 rem css书写
- Nexus安装、使用说明 (转)
- 快速切题 sgu115. Calendar 模拟 难度:0
- POJ1426(KB1-E 暴力搜索)
- Linux下onvi支持h265环境的的搭建：gsoap的安装及生产.c .h文件
- angularJs $resource自定义方法（待完善）
- VMware 12安装虚拟机Mac OS X 10.10使用小技巧(虚拟机Mac OS X 10.10时间设置，虚拟机Mac OS X 10.10通过代理上网，Mac OS X 10.10虚拟机优化，VMware虚拟机相互复制)