Use AngularJS Copy Functionality

The following example demonstrates how to use the AngularJS copy functionality in a Kendo UI DatePicker.

Example

    <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content"ng-controller="MyCtrl">
        <div class="box-col">
          <h4>Select date:</h4>
          <input kendo-date-picker
                 k-ng-model="info.dateObject" />

          <button ng-click="reset()">RESET</button>
          <button ng-click="update(info)">SAVE</button>

          <pre>
          dateObject: 
          typeof dateObject: {{ getType(info.dateObject) }}
          dateObject instanceof Date: {{ isDate(info.dateObject) }}
        </pre>

        </div>
      </div>
      <style scoped>
        .box-col {
          width: 400px;
        }
      </style>
    </div>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ]);
      function MyCtrl($scope) {
        $scope.getType = function(x) {
          return typeof x;
        };
        $scope.isDate = function(x) {
          return x instanceof Date;
        };

        $scope.master= {};

        $scope.info= {
          dateObject: new Date(2014, 10, 10)
        };

        $scope.update = function(info) {
          // Example with 1 argument
          $scope.master= angular.copy(info);
        };

        $scope.reset = function() {
          // Example with 2 arguments
          $scope.info = {
            dateObject: null
          };
        };
      }
    </script>

See Also

• DatePicker JavaScript API Reference
• How to Set the First Weekday
• How to Create Date Masking
• How to Globally Modify Default Options
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.