初识WdatePicker日期组件

官网：http://www.my97.net/dp/demo/index.htm

准备：

在官网上下载WdatePicker组件，导入JS文件（注意不要破坏该组件的目录结构或者修改组件中的文件名）

<script src = js/datepicker/WdatePicker.js></script>

最简单的用法以下（不指定任何参数）：

<input type="text" onfocus="WdatePicker()">

复杂一点的用法以下（就是在WdataPicker()函数里添加参数）：

birthday:<input id = "birthday" type = "date"
                    onfocus = "WdatePicker({lang:'en',skin:'whyGreen',isShowWeek:false,readOnly:true,highLineWeekDay:true,dateFmt:'yyyy/MM/dd HH:mm:ss'})" />

参数的默认值在组件中的WdatePicker.js文件中。

Tips:

以上代码显示的图以下，看起来与普通文本没有区别，可是当文本框获取焦点时就会显示出日期选择器了。

若是要显示如下效果则须要给input标签添加一个class类id，以下

class = "Wdate"

显示效果以下，旁边有一个日期图标：

该组件还能够自定义皮肤，不过应该要在官网上下载。关于更多参数的详细信息请参考官方文档：http://www.my97.net/dp/demo/index.htm