My97DatePicker学习总结

参考官方文档资料

1.在单纯的html页面(放置在My97DatePicker压缩包)中，针对input，我们引入WdatePicker.js，添加css，我们得到：

<input type="text" name="" id="date"  class="Wdate"/>

但是，我们点击文本框是没有反应的。当然，如果我们不希望文本框中出现时间控件标识，我们去除class就可以，此时文本框亮度发生改变。

2.当我们添加上，onClick="WdatePicker()"事件后，在点击了文本框后，立刻就弹出时间控件，进行时间选择。

3.如果，我们希望，时间控件标识显示在文本框外，那么我们需要为文本框引入一个img标签，

<img onclick="WdatePicker({el:'date'})" src="skin/datePicker.gif" width="16" height="22" align="absmiddle">

我们要注意的就是，@1.为img标签中，el:后面放置的是input的id，@2.src路径要正确

4.年份输入框（>>）有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框

5.在弹出的时间控件框中，通过属性isShowWeek是否显示日期所在的周，true，进行显示。

提醒：

    @1.isShowWeek放置在img标签中，是不能成功出现的。

    @2.isShowWeek放置在input标签的onclick事件中，也是不能成功出现的。

    @3.isShowWeek必须放置在input标签的onfocus事件中，才可以成功出现。

6.如果我们想获取，我们选择的日期所在的周数，那么需要我们在添加一个input文本框，同时设置id，

然后将id赋值给时间控件中onpicked函数中。WW的始终显示两位数，W不是固定的两位数形式。

onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

7.设置时间文本框中时间是否不可修改状态，只需要在WdatePicker函数中，添加readOnly=true或者readOnly:true(推荐方式)，(属性之间彼此用，隔开)即完成不可修改设置。结合上述代码，我们得到：

<input type="text" name="" id="date"        onFocus="WdatePicker({isShowWeek:true,readOnly:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

此时，我们点击文本框，时间控件不在弹出。

8.设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末(暂时没有试通？？)

9.清空按钮和今天按钮，对应的属性是isShowClear 和 isShowToday，在WdatePicker中设置，可以控制按钮显示与否。默认true.

<input type="text" name="" id="date" onFocus="WdatePicker({isShowWeek:true,highLineWeekDay:true,isShowClear:false,isShowToday:false,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

10.控件在边框附近是，会自动选择显示的位置，不用担心控件越界的问题。

11.如果不放心其自动调整，我们可以手动的设置其弹出的位置。在WdatePicker中添加属性position:{left:100,top:50}，

12.待续