My97DatePicker时间选择器

转自：http://blog.sina.com.cn/s/blog_4cb400450100dsj0.html

示例5-2-2 使用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\')}'})"/>

注意:$dp.$是一个内置函数,相当于document.getElementByIdx

示例5-2-3 将选择的值拆分到文本框

年 月 日 时 分 秒 

<input type="text" id="d523_y" 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 HH:mm:ss',onpicked:pickedFunc})" src="http://cyxinda.blog.163.com/blog/../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>

<script>

function pickedFunc(){

$dp.$('d523_y').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>

注意:el:'d523'中,如果你不需要d523这个框,你可以把他改成hidden,但是el属性必须指定

$dp.$和$dp.cal.getP都是内置函数

onclearing 和 oncleared 事件  语言配置

skin	string	'default'	皮肤名称 默认自带 default和whyGreen两个皮肤   另外如果你的css够强的话,可以自己做皮肤 你可以参考皮肤配置
dateFmt	string	'yyyy-MM-dd'	日期显示格式   你可以参考自定义格式
realDateFmt	string	'yyyy-MM-dd'	计算机可识别的,真正的日期格式   无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配 建议使用默认值
realTimeFmt	string	'HH:mm:ss'
realFullFmt	string	'%Date %Time'
minDate	string	'1900-01-01 00:00:00'	最小日期(注意要与上面的real日期相匹配)
maxDate	string	'2099-12-31 23:59:59'	最大日期(注意要与上面的real日期相匹配)
startDate	string	''	起始日期,既点击日期框时显示的起始日期   为空时,使用今天作为起始日期(默认值) 否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配) 你可以参考起始日期示例
isShowWeek	bool	false	是否显示周   你可以参考周显示示例
highLineWeekDay	bool	true	是否高亮显示 周六 周日
isShowClear	bool	true	是否显示清空按钮
isShowToday	bool	true	是否显示今天按钮
isShowOthers	bool	true	为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示
readOnly	bool	false	是否只读
errDealMode	int	0	纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记
autoPickDate	bool	null	为false时 点日期的时候不自动输入,而是要通过确定才能输入   为true时 即点击日期即可返回日期值 为null时(推荐使用) 如果有时间置为false 否则置为true
qsEnabled	bool	true	是否启用快速选择功能
quickSel	Array	null	快速选择数据,可以传入5个快速选择日期   注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配 你可以参考快速选择示例
disabledDays	Array	null	可以使用此功能禁用周日至周六所对应的日期   0至6 分别代表 周日至周六 你可以参考无效天示例
disabledDates	Array	null	可以使用此功能禁用所指定的一个或多个日期   你可以参考无效日期示例
opposite	bool	false	默认为false, 为true时,无效天和无效日期变成有效天和有效日期   你可以参考有效天与有效日期示例
onpicking	function	null	此四个参数为事件参数   你可以参考自定义事件示例
onpicked	function	null
onclearing	function	null
oncleared	function	null