Angular Material DateTimepicker

Question

I am using this http://logbon72.github.io/angular-material-datetimepicker/ (Angular Material Date Time picker) It works well when only one is present

<md-input-container flex-gt-md="200">
    <input time="false" date="true" mdc-datetime-picker type="text" id="date"
           placeholder="Posting Date" format="YYYY-MM-DD"
           ng-model="posting_date" min-date="minDate" max-date="maxDate">
</md-input-container>

But it fails when I code like this in (ng-repeat)

<div ng-repeat="JobExp in jobpostings">
    <md-input-container flex-gt-md="200">
        <input time="false" date="true" mdc-datetime-picker type="text" id="date"
               placeholder="Posting Date" format="YYYY-MM-DD" md-select="changed()"
               ng-model="JobExp.posting_date" min-date="minDate" max-date="maxDate">
    </md-input-container>
</div>

I tried calling md-select function but it doesnt call nor ng-select I tried using $watch like this

$scope.$watch("JobExp.posting_date", function(newValue, oldValue) {
    $scope.JobExp.posting_date = $filter('date')(new Date($scope.JobExp.posting_date), 'yyyy-MM-dd');
    console.log("PostinDate:"+$scope.JobExp.posting_date);

}); 

It says cannot read the property of undefined near posting_date

What mistake I am doing ? How to achieve this ?

Answer 1

One problem which I see is that, in your ng-repeat , for all the date-picker, the ng-model is JobExp.posting_date . Which is logically wrong because all your datepickers will be binded to one scope variable and changing one will change the value in all the others.

You should consider using separate ng-model for each datepicker. You can have separate ng-model like this:

<input time="false" date="true" mdc-datetime-picker type="text" id="date"
           placeholder="Posting Date" format="YYYY-MM-DD" md-select="changed()"
           ng-model="posting_date{{$index}}" min-date="minDate" max-date="maxDate">

This will give you separate ng-model for each datepicker like this: posting_date0 , posting_date1 and so on...

In order to put a watch on all the models, you can create a watch on collection like this:

$scope.$watchCollection('[posting_date0, posting_date1]', function(newValues, oldValues){
  // do stuff here
  // newValues and oldValues contain the new and respectively old value
  // of the observed collection array
});