Angular -UI multiple datepickers insider controllers

Question

I am creating a form with several angular -ui datepickers and some input. For datepickers, I created a controller and a parent form controller, for example, the sample below. The form controller has a model that includes 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> 

• I am going the right way to have a separate controller for datepicker. This will act as a common controller for all date entries.
• If so, is it possible to have a common way to bind data in the datepicker controller to model dates (model.startDate, model.endDate in this case) in the parent controller.
• Is there an alternative way to do this.

Thank you and welcome.

Answer 1

Must have more read on area inheritance

Parent 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 a detailed example here: http://angular-ui.imtqy.com/bootstrap/#/datepicker and wrapped it in my own directive. That way, I can simply discard an unlimited number of datepickers to my page and specify a model for each of them to bind. I don’t need to control the transmission of duplicate settings or set unique variables to track the status of “open”, 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 selection open / close, and the values ​​will be updated in myDate1 , myDate2 and myDate3 respectively. The open / closed status is now encapsulated in the directive and out of mind.

To implement the directive, I copied the code for the "JS" tab to the controller, and I copied the code for the "Markup" tab to this template. At the end, I added 1 bit of code to update the value of the parent area:

 $scope.$watch('dt', function(newVal, oldVal) { $scope.myDatePickerModel = newVal; }); 

At the beginning 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 the selection area and two-way binding to the attribute that defines the model of the parent area:

 scope: { myDatePickerModel: '=' } 

Here is the full directive code:

 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 datepicker.html code, a 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

another solution, declare the datepicker open () method in $ rootScope and is available for the whole 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/