初識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