`

My97DatePicker常用练习

My97DatePickerMy97DatePicker4.7My97DatePicker4.8 
阅读更多
参考官网资料:http://www.my97.net/dp/demo/
My97DatePicker 演示和文档
http://yhceye2010.iteye.com/blog/1142541
通过测试在My97DatePicker4.7..2以上正常!
在附件中上传了工程,它包含My97DatePicker的二个版本：4.7.2,4.8beta
运行效果图如下： 

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>     
    <title>My97DatePickerBeta</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<script language="javascript" type="text/javascript" src="My97DatePickerBeta/My97DatePicker/WdatePicker.js"></script>
	<style type="text/css">		
		.my97{			
			padding-left:5px;
			padding-bottom:5px; 
			padding-top:20px;
			color:#222222; 
			font-size:12px; 
			background:#f4f9ff; 
			line-height:22px;
			border:1px solid green;
			margin:5px;
			width:450px; 			
			height:auto;
			float:left;
		}
		.my97 img{
			cursor:hand;
		}
	</style>
  </head>  
  <body>      
    <div class="my97">
    	<p>常规调用&nbsp;<input  type="text" onClick="WdatePicker()"/><p>
       	<p>周的应用&nbsp;
    	<input  type="text" id="dl3"  onfocus="WdatePicker({isShowWeek:true})"/>
    	<p>
    	<p>图标触发&nbsp;
    	<input  type="text" id="demospan2"/>
    	<img onClick="WdatePicker({el:'demospan2'})" src="My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
    	<p>
    	<p>自定义弹出位置 &nbsp;使用positon属性指定,弹出日期的坐标为{left:100,top:50}<br>
    	<input  type="text" id="dl3"  onfocus="WdatePicker({position:{left:100,top:50}})"/>
    	<p>
    	<p>自定义星期的第一天 &nbsp;<br>相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类<br>
    	<input  type="text" id="dl3"  onfocus="WdatePicker({firstDayOfWeek:5})"/>
    	<p>
    </div>      
  
    
    <div class="my97">
    	<p>只读开关,高亮周末功能&nbsp;
    	<br>设置readOnly属性 true 或 false 可指定日期框是否只读
	     <br>设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末
	     <br>设置日期可输入,不高亮周末&nbsp;
    	 &nbsp;<input  type="text" id="dl3"  onfocus="WdatePicker({readOnly:false,highLineWeekDay:false})"/>
    	 <br>设置日期不可输入,高亮周末&nbsp;&nbsp;
    	 <input  type="text" id="dl3"  onfocus="WdatePicker({readOnly:true,highLineWeekDay:true})"/>
    	<p>
    	<p>利用onpicked事件把周赋值给另外的文本框&nbsp;
    	<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');}})"/>
    	<br>您选择了第<input type="text" id="d122_1"/>
    	<br>(W格式)周, 另外您可以使用WW格式<input type="text" id="d122_2"/>周    	    	
    	<p>将日期返回到&ltspan&gt中&nbsp;<br>
		<span id="demospan" style="color:red">2011-09-15</span>
		<img onClick="WdatePicker({el:'demospan'})" src="My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />
	   	</p>
    </div> 
   
      <div class="my97">
    	<p>平面显示&nbsp;
    	<div id="div1"></div>
    	<script>
			WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
		</script> 	
    	</p>    	    
    	<p>操作按钮自定义 &nbsp;清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true<br>
    	<input  type="text" id="dl3"  onfocus="WdatePicker({isShowClear:false,isShowToday:false})"/>
    	</p>
    </div> 
    
     <div class="my97">
    	<p>起始日期简单应用&nbsp;当日期框为空值时,将使用 1980-05-01 做为起始日期 <br>    	
    	<input type="text" id="d221" onFocus="WdatePicker({startDate:'2011-09-15'})"/>
    	</p>
    	<p>alwaysUseStartDate属性应用,日期框无论是何值,始终使用 1980-05-01 做为起始日期 <br>    	
    	<input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>
    	</p>
    </div> 
    
   <div class="my97">
    	<p>使用内置参数&nbsp;除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月) <br>    	
    	<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
    	&nbsp;<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01',dateFmt:'yyyy年M月d HH时mm分 ',alwaysUseStartDate:true})"/>
    	</p>
    	<p>    	
    	<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01',dateFmt:'yyyy年M月',alwaysUseStartDate:true})"/>&nbsp;
    	<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01',dateFmt:'H:m:s',alwaysUseStartDate:true})"/>
    	</p>
    </div> 
    
    <div class="my97">
    	<p>使用内置参数&nbsp;除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月) <br>    	
    	<input type="text" id="d233" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})"/>
    	&nbsp;<input type="text" id="d233" onFocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})"/>
    	</p>
    	<p>    	
    	<input type="text" id="d233" onFocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})"/>&nbsp;    
    	</p>
    </div> 
    
    <div class="my97">
    	<p>取得系统可识别的日期值(&nbsp;类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05<br>    	
    	<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
		&nbsp;<input id="d244_2" type="text" />    
    	</p>
    	<p>星期, 月 日, 年<br>    	
    	<input type="text" id="d245" onfocus="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate"/>
    	</p>
    	<p>双月日历功能&nbsp;注意:双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true<br>    	
    	<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>
    	</p>
    </div>
    
      <div class="my97">
    	<p>自动纠错功能&nbsp;<br>纠错处理可设置为3种模式:提示(默认) 自动纠错 标记,当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值<br>    	
    	<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({errDealMode:0})"/>		
    	</p> 
    	<p>民国年演示<br>    	
    	<input type="text" id="d28" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>		
    	</p>    	
    </div>
    
    <div class="my97">
    	<p>日期范围限制&nbsp;静态限制 	
    	<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2012-12-20'})"/>	
    	</p> 
    	<p>限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30<br>    	
    	<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"/>		
    	</p>   
    	<p>限制日期的范围是 2008年2月 到 2008年10月<br>    	
		<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>
    	</p> 
    	<p>限制日期的范围是 8:00:00 到 11:30:00<br>    	
		<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>
    	</p> 	
    </div>
    
    <div class="my97">
    	<p>日期范围限制&nbsp;动态限制&nbsp;只能选择今天以前的日期(包括今天) 	
    	<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>	
    	</p> 
    	<p>只能选择今天以后的日期(不包括今天)<br>    	
    	<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>		
    	</p>   
    	<p>只能选择本月的日期1号至本月最后一天<br>    	
		<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>
    	</p> 
    	<p>只能选择今天7:00:00至明天21:00:00的日期<br>    
    	<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'})"/>	
    	</p> 
    	<p>只能选择 20小时前 至 30小时后 的日期<br>    
		<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'})"/>
    	</p> 	
    </div>
    
    <div class="my97">
    	<p>日期范围限制&nbsp;脚本自定义限制&nbsp;前面的日期不能大于后面的日期且两个日期并且不能大于 2020-10-01 	
    	<br>开始日期<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'})"/>	
    	</p> 
    	<p>前面的日期+3天 不能大于 后面的日期<br>    	
    	日期从<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});}'})"/>	
    	</p>   
    	<p>前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3<br>    	
		住店日期从<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'})"/>
		</p> 
    	<p>发挥你的JS才能,定义任何你想要的日期限制<br>    
		<script>
			//返回一个随机的日期
			function randomDate(){
				var Y = 2000 + Math.round(Math.random() * 10);
				var M = 1 + Math.round(Math.random() * 11);
				var D = 1 + Math.round(Math.random() * 27);
				return Y+'-'+M+'-'+D;
			}
		</script>
		<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
    	</p>     	
    </div>
    
     <div class="my97">
     	<p>无效天&nbsp;可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)	
    	 禁用 周六 所对应的日期&nbsp;<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>
    	</p> 
    	<p> 禁用 周六 周日 所对应的日期&nbsp;<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>
    	</p> 
    	<p>无效日期
    	<br>
    	用法(正则匹配):
		<br>如果你熟悉正则表达式,会很容易理解下面的匹配用法
		<br>如果不熟悉,可以参考下面的常用示例
		<br>['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
		<br>['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
		<br>['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
		<br>['^2006'] 表示禁用 2006年的所有日期		
		<br>此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制 注意:%ld不能使用
		<br>['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
		<br>['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天		
		<br>当然,除了可以限制日期以外,您还可以限制时间
		<br>['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 : 需要 使用 \: ) 
		</p>    	
     </div>
     
     <div class="my97">
    	<p>禁用 每个月份的 5日 15日 25日	
    	<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
    	</p> 
    	<p>禁用 所有早于2000-01-01的日期   	
    	<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>	
    	</p>   
    	<p>配合min/maxDate使用,可以把可选择的日期分隔成多段   	
		<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]$']})"/>
    	</p> 
    	<p>禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量<br>    
		<input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/> 
    	</p> 
    	<p>#F{}也是可以使用的    
			<script>
				function randomH(){
					//产生一个随机的数字 0-23
					var H = Math.round(Math.random() * 23);
					if(H<10) H='0'+H;
					//返回 '^' + 数字
					return '^'+H;
				}
			</script>
			<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
		</p> 	
    </div>
    
     <div class="my97">
    	<p>有效日期&nbsp;只启用 每个月份的 5日 15日 25日	
    	<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
    	</p> 
    	<p>高亮每周 周一 周五   	
    	<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/> 
    	</p>   
    	<p>高亮每月 1号 15号  	
		<input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/> 
    	</p>     	
    </div>
    
    <div class="my97">
    	<p>自定义事件&nbsp;onpicking事件演示
    	<input type="text" id="5421" onFocus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;}})" class="Wdate"/>
    	</p> 
    	<p>使用onpicked实现日期选择联动&nbsp;选择第一个日期的时候,第二个日期选择框自动弹出   	
    	<input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>
	   至<input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>
    	</p>   
    	<p>将选择的值拆分到文本框   	
		    <input type="text" id="hdate" size="5"/> 年
			<input type="text" id="d523_M" size="3"/> 月
			<input type="text" id="d523_d" size="3"/> 日
			<input type="text" id="d523_HH" size="3"/> 时
			<input type="text" id="d523_mm" size="3"/> 分
			<input type="text" id="d523_ss" size="3"/> 秒
			<img onclick="WdatePicker({el:'hdate',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>
			<script>
			function pickedFunc(){
				$dp.$('hdate').value=$dp.cal.getP('y');
				$dp.$('d523_M').value=$dp.cal.getP('M');
				$dp.$('d523_d').value=$dp.cal.getP('d');
				$dp.$('d523_HH').value=$dp.cal.getP('H');
				$dp.$('d523_mm').value=$dp.cal.getP('m');
				$dp.$('d523_ss').value=$dp.cal.getP('s');
			}
			</script>
    	</p>     	
    </div>
    
    
     <div class="my97">
    	<p>使用onclearing事件取消清空操作
    	<input type="text" class="Wdate" id="d531" onFocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?'))return true;}})"/>
    	</p> 
    	<p>使用cal对象取得当前日期所选择的月份(使用了 dp.cal)   	
    	<input type="text" class="Wdate" id="d532" onFocus="WdatePicker({oncleared:function(dp){alert('当前日期所选择的月份为:'+dp.cal.date.M);}})"/>
    	</p>   
    	<p>综合使用两个事件	
		        <script>
				function d533_focus(element){
					var clearingFunc = function(){ if(!confirm('日期框的值为:'+this.value+', 确实要清空吗?')) return true; }
					var clearedFunc = function(){ alert('日期框已被清空'); }
					WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc})
				}
				</script>
				<input type="text" class="Wdate" id="d533" onFocus="d533_focus(this)"/>
    	</p>  
		<p>年月日改变时弹出信息
		<input type="text" class="Wdate" onFocus="WdatePicker({dchanging:cDayFunc, Mchanging:cMonthFunc, ychanging:cYearFunc, dchanged:cDayFunc, Mchanged:cMonthFunc, ychanged:cYearFunc})"/>
		<script>
			function cDayFunc(){
				cFunc('d');
			}
			function cMonthFunc(){
				cFunc('M');
			}
			function cYearFunc(){
				cFunc('y');
			}
			function cFunc(who){
				var str,p,c = $dp.cal;
				if(who=='y'){
					str='年份';
					p='y';
				}else if(who=='M'){
					str='月份';
					p='M';
				}else if(who=='d'){
					str='日期';
					p='d';
				}
				alert(str+'发生改变了!\n$dp.cal.date.'+p+'='+c.date[p]+'\n$dp.cal.newdate.'+p+'='+c.newdate[p]);
			}
		</script>				
		</p>  	
    </div>
  </body>
</html>
  • 大小: 187.8 KB
分享到：
| 转载:本地每天定时备份数据库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics