My97 Date Picker说明文档
一. 简介
1. 简介
目前的版本是:4.8
2. 注意事项
∙My97DatePicker目录是一个整体，不可破坏里面的目录结构，也不可对里面的文件改名，可以改目录名∙My97DatePicker.htm是必须文件，不可删除(4.8以后不存在此文件)
∙各目录及文件的用途:
WdatePicker.js配置文件，在调用的地方仅需使用该文件，可多个共存，以xx_WdatePicker.js方式命名config.js语言和皮肤配置文件，无需引入(4.8以后合并入WdatePicker.js)
calendar.js日期库主文件，无需引入
My97DatePicker.htm临时页面文件，不可删除(4.8以后不存在此文件)
目录lang存放语言文件，你可以根据需要清理或添加语言文件
目录skin 存放皮肤的相关文件，你可以根据需要清理或添加皮肤文件包
∙当WdatePicker.js里的属性:$wdate=true时，在input里加上class="Wdate"就会在选择框右边出现日期图标，如果您不喜欢这个样式，可以把class="Wdate"去掉，另外也可以通过修改skin目录下的
WdatePicker.css文件来修改样式
3. 支持的浏览器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
注意:IE 8.0是完美支持的，如果你在IE8上使用遇到问题，请与我取得联系，务必附上能再现你的问题的纯HTML代码包
二. 功能及示例
1. 常规功能
1.支持多种调用模式
除了支持常规在input单击或获得焦点调用外，还支持使用其他的元素如:<img><div>等触发
WdatePicker函数来调用弹出日期框
示例1-1-1 常规调用
<input id="d11" type="text" onClick="WdatePicker()"/>
示例1-1-2 图标触发
<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16"
height="22" align="absmiddle">
注意：只需要传入控件的id即可
2.下拉，输入，导航选择日期
年月时分秒输入框都具备以下三种特性
1. 通过导航图标选择
2. 直接使用键盘输入数字
3. 直接从弹出的下拉框中选择
另：年份输入框有智能提示功能，当用户连续点击同一个导航按钮5次时，会自动弹出年份下拉框3.支持周显示
可以通过配置isShowWeek属性决定是否限制周，并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周
示例1-2-1 周显示简单应用
<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>
注意：周算法参考的是ISO8601定义的方法，如果您对此有疑问，请详
见:/wiki/ISO_week_date
周算法选择(4.8新增)
相关属性:weekMethod
周算法不同的地方有一些差异
常见算法有两种
1. ISO8601：规定第一个星期四为第一周，默认值
2. MSExcel:1月1日所在的周
示例1-2-2 利用onpicked事件把周赋值给另外的文本框
您选择了第格式)周, 另外您可以使用WW格式<input type="text" class="Wdate" id="d122"
onFocus="WdatePicker({isShowWeek:true,onpicked:function()
{$dp.$('d122_1').value=$P('W','W');$dp.$('d122_2').value=$P('W','W W');}})"/>
onpicked 用法详见自定义事件
$P 用法详见内置函数和属性js当前日期加一天
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.自定义弹出位置
当控件处在页面边界时，它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
示例1-6 通过position属性，自定义弹出位置
使用positon属性指定，弹出日期的坐标为{left:100,top:50}
<input class="Wdate" type="text" id="d16"
onfocus="WdatePicker({position:{left:100,top:50}})"/>
position属性的详细用法详见属性表
8.自定义星期的第一天(4.6新增)
各个国家的习惯不同，有些喜欢以星期日作为第一天，有些以星期一作为第一天.
相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0：星期日 1：星期一以此类推
示例1-7 以星期一作为第一天
<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/> 2. 特功能
1.平面显示
日期控件支持平面显示功能，只要设置一下eCont属性就可以把它当作日历来使用了，无需触发条件，直接显示在页面上
示例2-1 平面显示演示
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期
是:'+DateStr())}})
</script>
$DateStr 用法详见内置函数和属性
2.支持多种容器
除了可以将值返回给input以外，还可以通过配置el属性将值返回给其他的元素
(如:textarea,div,span)等，带有innerHTML属性的HTML元素
示例2-2 将日期返回到<span>中
2008-01-01
代码:
< span id="demospan">2008-01-01</span>
<img onClick="WdatePicker({el:'demospan'})"
src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22"
align="absmiddle" />
3.起始日期功能
注意：日期格式必须与realDateFmt 和realTimeFmt 一致而不是与dateFmt 一致

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。