1. 程式人生 > >angular js 中使用 wdatepicker控制元件

angular js 中使用 wdatepicker控制元件

wdatepicker是一個非常好用的時間控制元件,可以選擇年月日以及時分秒,特別方便,但是在angular js 中使用的時候也比較麻煩,現在將遇到的一些問題總結下:

從網上檔了一個wdatepicker的包,但是這個包不能破壞原有的結構。

1.在封裝的directive控制元件中使用的時候,總是報錯,找不到Wdatepicker.js等一些引用檔案:

解決辦法:修改下Wdatepicker.js中的一個引數$dpPath:"./datepicker/"   然後就可以啦。

2.ng-model="sTime" 失效,選擇完時間,總是獲取不到選擇的時間。

解決辦法:

(1)在使用WdatePicker的地方,加上 onChange = "" 。如下:

<input id="d5421" class="form-control " onclick="WdatePicker({el:'d5421',readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" size="16" type="text" ng-model="startDate"  onChange=""  required ui-validate="'$value<=endDate'" ui-validate-watch="'endDate' " style="background-color:white;"/>

(2)但是如果頁面被壓縮,onChange = "" 就不存在了,資料繫結又會失效。這時可以在初始化WdatePicker中加入onpicked: function(){$(this).trigger('change')},意思是選擇值發生變化的時候,選擇元素觸發change事件。如下:

<input id="d5421" class="form-control " onclick="WdatePicker({onpicked: function(){$(this).trigger('change')},el:'d5421',readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" size="16" type="text" ng-model="startDate" required ui-validate="'$value<=endDate'" ui-validate-watch="'endDate' " style="background-color:white;"/>

備註:

關於wdatepicker的一些屬性、事件可以參考其資料:

http://www.my97.net/dp/demo/resource/2.1.asp