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

10,014

Solution 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"]
};

Solution 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

Share:
10,014
sam rodrigues
Author by

sam rodrigues

Updated on June 09, 2022

Comments

  • sam rodrigues
    sam rodrigues about 2 years

    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" />