AngularJS下使用Kendo的DatePicker控制項日期有時不顯示

標籤：style   blog   ar   color   使用   sp   java   for   on   

在AngularJS下使用Kendo的DatePicker控制項時，在k-ng-model綁定了日期對象，但是頁面在顯示時，有時控制項顯示空白，但是有時又正常，具有一定隨機性，在stackoverflow中也沒找到類似狀況和解決方案，經過分析跟蹤後，確認問題是DatePicker控制項的問題，控制項說明文檔中所述ng-model和k-ng-model是有區別的：

• The first is to demonstrate the difference between ng-model="dateString" and k-ng-model="dateObject". dateString is bound to the input field‘s contents as a string — so it gets the formatted string date, while dateObject is bound to the widget‘s value() which in the case of DatePicker returns a JS Date object. As you can see, we can apply the Angular date filter on it.

ng-model綁定的是一個string類型的變數，k-ng-model則綁定一個物件變數，在兩者都綁定的情形下，控制項顯示的是ng-model綁定的變數，所以可以把控制項的ng-model和k-ng-model都賦值，這樣就能保證值正常又顯示正確。

HTML代碼：

<input kendo-date-picker k-ng-model="datestart" ng-model="datestartString" />

JavaScript代碼：

$scope.datestart = new Date();$scope.datestartString = $scope.datestart.getFullYear() + ‘-‘ + ($scope.datestart.getMonth() + 1) + ‘-‘ + $scope.datestart.getDate();

有一點要注意，js日期對象的getMonth返回的月份為0到11，所以上面代碼中才加了1。

AngularJS下使用Kendo的DatePicker控制項日期有時不顯示