My97DatePicker日历控件实例资源-CSDN文库

共13个文件

js：5个

gif：3个

css：3个

javascript

日历控件

jquery

4星 · 超过85%的资源需积分: 10 191 浏览量 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

<!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

评论收藏

内容反馈