Datepicker inside modal not working

Question

I am trying to use ui-bootstrap components to make datepicker inside modal. Datepicker should send back a date formatted as a unix timestamp.

• this works great if the datepicker is not inside the modal (= datestamp when choosing a date): http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview

• then I will put the directive inside the modal: http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

here are the controllers:

.controller('MyCtrl', [ '$scope', '$modal', function ($scope, $modal) { $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'tplModal.html', controller: 'MyModalCtrl' }); }; }]) .controller('MyModalCtrl', [ '$scope', '$modalInstance', function ($scope, $modalInstance) { $scope.required= {}; $scope.disabled = function(date, mode) { return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) ); }; $scope.minDate = new Date(); $scope.$watch('dt', function() { if ($scope.dt) $scope.required.timestamp = Math.floor($scope.dt.getTime() / 1000); console.log('timestamp: ', $scope.required.timestamp, '/ dt: ', $scope.dt); }); $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }]); 

and html modality template:

 <div class="modal-body"> <div ng-model="dt"> <datepicker min="minDate" show-weeks="false"></datepciker> </div> <div> dt <span class="uneditable-input span2">{{dt | date:'dd.MM.yyyy' }}</span> dt <span class="uneditable-input span2">{{ dt }}</span> timestamp <span class="uneditable-input span2">{{ required.timestamp }}</span> </div> </div> 

In this 2nd version, the timestamp is not updated when the date changes (it, like the watch $ watch, does not work).

Do you know how to make this work?

Answer 1

You need to use the famous dot in the ng-model expression, since $ modal creates a trasclusion region for the contents of the window. In other words, there is an area created between your controller and modal content.

In any case, using a dot in an ng-model expression (which is best practice) solves the problem for you:

 <div ng-model="dt.value"> <datepicker min="minDate" show-weeks="false"></datepciker> </div> 

and in JavaScript:

 $scope.dt = {}; $scope.$watch('dt.value', function(newValue) { if (newValue) $scope.required.timestamp = Math.floor(newValue.getTime() / 1000); console.log('timestamp: ', $scope.required.timestamp, '/ dt: ', newValue); }); 

Dashboard: http://plnkr.co/edit/Adst8I8S0e0DLcVnhpLq?p=preview

Answer 2

You need to apply the same trick you did for the timestamp and put it in an object in scope, as I did here .

 $scope.picker = { dt: new Date(), timestamp: '' };