Angularjs using Kendo DatePicker control date sometimes does not appear

When using Kendo's DatePicker control under Angularjs, the Date object is bound in K-ng-model, but sometimes the control appears blank when the page is displayed, but sometimes it is normal, with some randomness. Similar conditions and workarounds were not found in StackOverflow, and after analyzing the trace, it was confirmed that the problem was the DatePicker control, as described in the control description document Ng-model and K-ng-model are different:

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

Ng-model binds a variable of type string, K-ng-model binds an object variable, and in the case of both bindings, the control displays the Ng-model bound variable, so the Ng-model and K-ng-model of the control can be assigned values. This will ensure that the values are normal and displayed correctly.

HTML code:

<kendo-date-picker k-ng-model= "DateStart"  ng-model= " Datestartstring "/>

JavaScript code:

New= $scope. Datestart.getfullyear () + '-' + ($scope. Datestart.getmonth () + 1) + '-' + $scope. datestart.getd Ate ();

One thing to note is that the getmonth of the JS Date object returns 0 to 11 of the month, so the above code adds 1.

Angularjs using Kendo DatePicker control date sometimes does not appear