日期控件使用方法.doc

一. 简介 1. 简介 目前的版本是:4.2 正式版 发布于2008-12-03 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该文件 config.js 语言和皮肤配置文件 calendar.js 日期库主文件) My97DatePicker.htm 临时页面文件,不可删除目录lang 存放语言文件 目录skin 存放皮肤的相关文件 当WdatePicker.js里的属性:$wdate=true时,在input里加上class=Wdate就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class=Wdate去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式 3. 支持的浏览器 IE 6.0+ , Firefox 2.0+ , Opera 9.5+ , Safari 3.0+ 二. 功能及示例 1. 常规功能 1.?????????? 支持多种调用模式 除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:imgdiv等触发WdatePicker函数来调用弹出日期框 示例1-1-1 常规调用 input id=d11 type=text onClick=WdatePicker()/ 示例1-1-2 图标触发 input id=d12 type=text/img onclick=WdatePicker({el:$dp.$(d12)}) src=../skin/datePicker.gif width=16 height=22 align=absmiddle注:$dp.$ 相当于 document.getElementById $dp.$ 的详细用法可以参考 HYPERLINK /dp/demo/resource/main.asp \l m5#m5 内置函数 2.?????????? 下拉,输入,导航选择日期 年月时分秒输入框都具备以下三种特性 1. 通过导航图标选择2. 直接使用键盘输入数字3. 直接从弹出的下拉框中选择另:年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框 3.?????????? 支持周显示 可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周 ? 示例1-2-1 周显示简单应用 input id=d121 type=text onfocus=WdatePicker({isShowWeek:true})/ 示例1-2-2 利用onpicked事件把周赋值给另外的文本框 ?? 您选择了第 (W格式)周, 另外您可以使用WW格式: 周 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);}})/onpicked 用法详见 HYPERLINK /dp/demo/resource/main.asp \l # 自定义事件$dp.cal.getP 用法详见 HYPERLINK /dp/demo/resource/main.asp \l m5#m5 内置函数 4.?????????? 只读开关,高亮周末功能 设置readOnly属性 true 或 false 可指定日期框是否只读 设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末 5.?????????? 操作按钮自定义 清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true 示例1-5 禁用清空功能 最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉input class=Wdate type=text id=d15 onFocus=WdatePicker({isShowClear:false,readOnly:true})/ 6.?????????? 自动选择显示位置 当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了. 7.????