My97DatePicker常用练习
参考官网资料:
http://www.my97.net/dp/demo/
My97DatePicker 演示和文档
http://yhceye2010.iteye.com/blog/1142541
通过测试在My97DatePicker4.7..2以上正常!
在附件中上传了工程,它包含My97DatePicker的二个版本：4.7.2,4.8beta
运行效果图如下：
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>常规调用 <input type="text" onClick="WdatePicker()"/><p>
<p>周的应用
<input type="text" id="dl3" onfocus="WdatePicker({isShowWeek:true})"/>
<p>
<p>图标触发
<input type="text" id="demospan2"/>
<img onClick="WdatePicker({el:'demospan2'})" src="My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
<p>
<p>自定义弹出位置 使用positon属性指定,弹出日期的坐标为{left:100,top:50}<br>
<input type="text" id="dl3" onfocus="WdatePicker({position:{left:100,top:50}})"/>
<p>
<p>自定义星期的第一天 <br>相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类<br>
<input type="text" id="dl3" onfocus="WdatePicker({firstDayOfWeek:5})"/>
<p>
</div>
<div class="my97">
<p>只读开关,高亮周末功能
<br>设置readOnly属性 true 或 false 可指定日期框是否只读
<br>设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末
<br>设置日期可输入,不高亮周末
<input type="text" id="dl3" onfocus="WdatePicker({readOnly:false,highLineWeekDay:false})"/>
<br>设置日期不可输入,高亮周末
<input type="text" id="dl3" onfocus="WdatePicker({readOnly:true,highLineWeekDay:true})"/>
<p>
<p>利用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');}})"/>
<br>您选择了第<input type="text" id="d122_1"/>
<br>(W格式)周, 另外您可以使用WW格式<input type="text" id="d122_2"/>周
<p>将日期返回到<span>中 <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>平面显示
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
</script>
</p>
<p>操作按钮自定义 清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true<br>
<input type="text" id="dl3" onfocus="WdatePicker({isShowClear:false,isShowToday:false})"/>
</p>
</div>
<div class="my97">
<p>起始日期简单应用 当日期框为空值时,将使用 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>使用内置参数 除了使用静态的日期值以外,还可以使用动态参数(如:%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})"/>
<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})"/>
<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01',dateFmt:'H:m:s',alwaysUseStartDate:true})"/>
</p>
</div>
<div class="my97">
<p>使用内置参数 除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月) <br>
<input type="text" id="d233" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})"/>
<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月'})"/>
</p>
</div>
<div class="my97">
<p>取得系统可识别的日期值( 类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05<br>
<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<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>双月日历功能 注意:双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true<br>
<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>
</p>
</div>
<div class="my97">
<p>自动纠错功能 <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>日期范围限制 静态限制
<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>日期范围限制 动态限制 只能选择今天以前的日期(包括今天)
<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>日期范围限制 脚本自定义限制 前面的日期不能大于后面的日期且两个日期并且不能大于 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>无效天 可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)
禁用 周六 所对应的日期 <input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>
</p>
<p> 禁用 周六 周日 所对应的日期 <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>有效日期 只启用 每个月份的 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>自定义事件 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实现日期选择联动 选择第一个日期的时候,第二个日期选择框自动弹出
<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>