<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<TITLE> 测试网页</TITLE>
<script language="javascript" type="text/javascript" src="js/jquery-132min2.js"></script>
<script language="javascript" type="text/javascript" src="noon/WdatePicker.js"></script>
</HEAD>
<BODY>
<h3>1.常规功能</h3>
<div>示例1-1：常规调用</div>
<input id="d11" type="text" onClick="WdatePicker()"/>
<hr>
<div>示例1-2：图标触发</div>
<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="noon/skin/datePicker.gif" width="16" height="22" align="absmiddle">
<hr>
<div>示例1-3：周显示简单应用</div>
<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>
<hr>
<div>示例1-4：利用onpicked事件把周赋值给另外的文本框</div>
<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');}})"/>
<hr>
<div>示例1-5：禁用清空功能</div>
<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>
<hr>
<div>示例1-6：通过position属性,自定义弹出位置</div>
<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>
<hr>
<div>示例1-7：自定义星期的第一天</div>
<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/>
<hr style="border-bottom:3px dashed #000">
<h3>2.特色功能</h3>
<div>示例2-1：平面显示演示</div>
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
</script>
<hr>
<div>示例2-2：平面显示演示</div>
<span id="demospan">2008-01-01</span>
<img onClick="WdatePicker({el:'demospan'})" src="noon/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />
<hr>
<div>示例2-3：起始日期简单应用</div>
<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>
<hr>
<div>示例2-4：alwaysUseStartDate属性应用</div>
<input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>
<hr>
<div>示例2-5：使用内置参数</div>
<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
<hr>
<div>示例2-6：年月日时分秒</div>
<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/>
<hr>
<div>示例2-7： 时分秒</div>
<input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>
<hr>
<div>示例2-8： 年月</div>
<input type="text" id="d243" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})" class="Wdate"/>
<hr>
<div>示例2-9：取得系统可识别的日期值</div>
<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<input id="d244_2" type="text" />
<hr>
<div>示例2-10：星期, 月 日, 年</div>
<input type="text" id="d245" onfocus="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate"/>
<hr>
<div>示例2-11：双月日历功能</div>
<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>
<hr>
<div>示例2-12：民国年演示</div>
<input type="text" id="d28" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>
<hr style="border-bottom:3px dashed #000">
<h3>3.多语言和自定义皮肤</h3>
<div>示例3-1：多语言示例</div>
繁体中文: <input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})"/>
英文:<input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})"/>
简体中文:<input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})"/>
<hr>
<div>示例3-2：皮肤演示</div>
默认皮肤：<input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/>
whyGreen皮肤:<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>
<hr style="border-bottom:3px dashed #000">
<h3>4.日期范围限制</h3>
<div>示例4-1：限制日期的范围是 2006-09-10到2008-12-20</div>
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>
<hr>
<div>示例4-2：限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30</div>
<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"/>
<hr>
<div>示例4-3：限制日期的范围是 2008年2月 到 2008年10月</div>
<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>
<hr>
<div>示例4-4：限制日期的范围是 8:00:00 到 11:30:00</div>
<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>
<hr>
<div>示例4-5：只能选择今天以前的日期(包括今天)</div>
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>
<hr>
<div>示例4-6：只能选择今天以后的日期(不包括今天)</div>
<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
<hr>
<div>示例4-7：只能选择本月的日期1号至本月最后一天</div>
<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>
<hr>
<div>示例4-8：只能选择今天7:00:00至明天21:00:00的日期</div>
<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'})"/>
<hr>
<div>示例4-9：只能选择 20小时前 至 30小时后 的日期</div>
<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'})"/>
<hr>
<div>示例4-10：前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01</div>
保质期为：<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'})"/>
<hr>
<div>示例4-11：前面的日期+3天 不能大于 后面的日期</div>
日期从<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});}'})"/>
<hr>
<div>示例4-12：前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3</div>
住店日期从<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'})"/>
<hr>
<div>示例4-13：禁用 每个月份的 5日 15日 25日</div>
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
<hr>
<div>示例4-14：禁用 所有早于2000-01-01的日期</div>
<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
<hr>
<div>示例4-15：配合min/maxDate使用,可以把可选择的日期分隔成多段</div>
<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]$']})"/>
<hr>
<div>示例4-16：min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情况下也能满足需求</div>
<input id="d454" 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]})"/>
<hr>
<div>示例4-17：禁用前一个小时和后一个小时内所有时间 使用 %y %M %d
My97DatePicker日历控件实例
4星 · 超过85%的资源 需积分: 10 128 浏览量
2014-03-24
22:18:37
上传
评论
收藏 29KB ZIP 举报 
My97DatePicker实例.zip （13个子文件） 
My97DatePicker实例 date 
date.html 10KB noon 
WdatePicker.js 10KB lang zh-cn.js 1KB en.js 644B zh-tw.js 1KB skin 
datePicker.gif 1KB whyGreen img.gif 2KB datepicker.css 4KB
bg.jpg 307B WdatePicker.css 192B default img.gif 2KB datepicker.css 4KB calendar.js 22KB资源评论
陈东青向前2014-04-23非常全，感谢分享。
