Binding date value to ng-model in angular kendo date picker

All we need is an easy explanation of the problem, so here it is.

I have an api which return the date in this format “014-08-26T15:10:45.402Z” i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out .

         <input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

In order to have the Kendo DatePicker working with a string date value model you need:

1) Use k-ng-model instead of ng-model.

2) Tell the widget in which exact format the date will be parsed.

<input kendo-date-picker k-ng-model="emp.datestart" k-options="datePickerOptions" />

Then at your AngularJS controller you will specify the date parsing format, for example:

$scope.datePickerOptions = {
    parseFormats: ["yyyy-MM-ddTHH:mm:ss"]
};

Method 2

you can use something like this

<h4>Select date:</h4>
        <input 
         kendo-date-time-picker
         k-options="monthSelectorOptions"             
         data-k-ng-model="dateObject"
         data-ng-model="dateString.startDate" 
         style="width: 100%;" />

var startDate = new Date();

      $scope.monthSelectorOptions = {
        value: startDate,
        format: "dd/MM/yyyy h:mm tt",
        parseFormats: ['ddd MMM dd yyyy'],
        animation: {
            close: {
                effects: "fadeOut zoom:out",
                duration: 300
            },
            open: {
                effects: "fadeIn zoom:in",
                duration: 300
            }
        },
        culture: "de-DE",
      };

And here is complete solution on kendo dojo

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply