CODEWITHSUNDEEP
javascriptdatetimeangularjsjquery-ui-datepicker
Huei Tan
Huei Tan

Reputation: 2315

Angularjs , How do i set the ng-model for the input to change Date and Time with auto-binding?

How to set the ng-model for the input to change Date and Time with auto-binding?

Here's the Plunker http://plnkr.co/edit/7kuvF6

I want to change the Date and Time in this case, but I don't know how to setup the ng-model for both input.

Thanks !

Upvotes: 0

Views: 3167

Answers (2)

Ethan Wu
Ethan Wu

Reputation: 938

Here is a way setup the ng-model for date and time:

In your html file:

<div ng-controller="date">
    DATE <input type="text" ng-model="date" jqdatepicker/><br />
    TIME <input type="text" ng-model="time" /><br />
    DateTTime: {{dateTtime}}<br />
</div>

In your directive:

myAPP.directive('jqdatepicker', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.datepicker({
        changeYear: "true",
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        showOtherMonths: true,
        showButtonPanel: true,
        onClose: function (selectedDate) {
          scope.dateTtime = selectedDate + "T" + scope.time;
          scope.$apply();
        }
      });
    }
  };
});

I assume you want to keep the format 2013-10-01T00:00 or will receive the data from somewhere in this format.

More detail in the working Plunker: http://plnkr.co/edit/P7BG6q?p=preview

Upvotes: 1

zs2020
zs2020

Reputation: 54524

You can assign it to the model defined in the scope in the callback function of the datepicker. You also need scope.$apply() to trigger the digest since the assignment is outside the AngularJS's.

onClose: function (selectedDate) {
     scope.dateTtime = selectedDate;
     scope.$apply();
}

Upvotes: 1

Related Questions