Angular-UI multiple datepickers insider form controller - angularjs

Question

I am creating a form with multiple angular-ui datepickers and some input data.
For the datepickers I have created a controller and a parent form controller like the sample given below. The form controller has the model which includes the datepicker dates.
JS:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('dateCntrl', function($scope,$timeout){
$scope.open = function() {
$timeout(function() {
$scope.opened = true;
});
};
});
app.controller('formCntrl', function($scope, $http){
$scope.model = {name:'', startDate:'', endDate:''};
});
HTML:
<form ng-controller="formCntrl">
<input type="text" id="name" placeholder="Name" ng-model="model.name" />
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="model.startDate" id="startDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="model.endDate" id="endDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
</form>
Am I going the right way in having a separate controller for the datepicker. This will act as a common controller for all the date inputs
If yes, is it possible to have a generic way of binding the data in the datepicker controller back to the model dates(model.startDate,model.endDate in this case) in the parent controller.
Is there a alternative way to go about this.
Thanks and regards.

Answer 1

Should have read more about the scope inheritance
The parent scope values can be accessed using $parent
<form ng-controller="formCntrl">
<input type="text" id="name" placeholder="Name" ng-model="model.name" />
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.startDate" id="startDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.endDate" id="endDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
</form>

Answer 2

I took all the code from the verbose example here: http://angular-ui.github.io/bootstrap/#/datepicker & wrapped it into my own directive. This way I can just drop unlimited datepickers into my page, and specify the model for each one to bind to. I do not have to manage passing repetitive settings, or setting up unique variables for tracking the "open" status anymore, I just put 1 line of code:
<div my-date-picker my-date-picker-model="myDate1"></div>
<div my-date-picker my-date-picker-model="myDate2"></div>
<div my-date-picker my-date-picker-model="myDate3"></div>
The user can then toggle each date picker open/closed, and the values will be updated into myDate1, myDate2, & myDate3 appropriately. The open/closed status is now encapsulated within the directive, and out of mind.
To implement the directive, I copied the 'JS' tab's code into it's controller, and I copied the 'Markup' tab's code into it's template. At the end I added 1 bit of code to update the value to the parent scope:
$scope.$watch('dt', function(newVal, oldVal) {
$scope.myDatePickerModel = newVal;
});
At the start of the controller, I changed $scope.today to initialize the value from the parent scope, instead of using the system clock:
$scope.init = function() {
$scope.dt = $scope.hxDatePickerModel;
};
$scope.init();
The directive uses an isolate scope, and 2-way binding on the attribute which defines the parent scope's model:
scope: {
myDatePickerModel: '='
}
Here's the full code of the directive:
app.directive('myDatePicker', function() {
function link(scope, element, attrs) {
}
function controller($scope) {
$scope.init = function() {
$scope.dt = $scope.myDatePickerModel;
};
$scope.init();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.$watch('dt', function(newVal, oldVal) {
$scope.myDatePickerModel = newVal;
});
}
return {
restrict: 'A',
templateUrl: 'datepicker.html',
link: link,
controller: controller,
scope: {
myDatePickerModel: '='
}
}
});
And here is the full code of datepicker.html, the template for this directive:
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>

Answer 3

other solution , declare the datepicker's open() method in $rootScope and it is available entire application .
Html :
<div ng-app="myApp">
<div ng-controller="DemoController">
<div>
<input type="text" name="salesEndDate" id = "salesEndDate" datepicker-popup="dd-MM-yyyy" ng-model="salesEndDate" datepicker-options="dateOptions"/>
<button id="salesEndDateCal" ng-click="datePickerOpen('salesEndDate')"><i class="icon-calendar"></i></button>
</div>
<div>
<input type="text" name="salesStartDate" id = "salesStartDate" datepicker-popup="dd-MM-yyyy" ng-model="salesStartDate" datepicker-options="dateOptions"/>
<button id="salesEndDateCal" ng-click="datePickerOpen('salesStartDate')"><i class="icon-calendar"></i></button>
</div>
</div>
</div>
Javascript :
var myApp = angular.module('myApp',['ui.bootstrap','ui.bootstrap.datepicker']);
function DemoController($scope,$timeout,$rootScope) {
$rootScope.datePickerOpen = function(id) {
$timeout(function() {
$("#"+id).focus();
});
};
}
jsfiddle link http://jsfiddle.net/angles_k/s7yZm/21/