javascript - (Angular + Bootstrap) How to stop two datepickers from being opened by the same button -
i have web page needs 2 datepickers, start date , end date. problem is, whenever click on glyph open date selector, both date picker opens @ same time.
here template, directive, controller , how it's being used. appreciated.
template:
<div class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="dd/mm/yyyy" ng-model="start_date" is-open="popup.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()"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </div>
directive:
'use strict'; /*global angular*/ angular.module("myapp") .directive("datepicker", function(){ return{ templateurl: 'templates/datepicker.html', controller: 'newdatectrl', replace: true }; });
controller
/*global angular*/ angular.module("myapp").controller("newdatectrl", function($scope) { $scope.popup = { opened: false }; $scope.open = function() { $scope.popup.opened = true; }; $scope.dateoptions = { formatyear: 'yy', maxdate: new date(2020, 5, 22), mindate: new date(), startingday: 1 }; })
index.html, part of form this:
.... <div class="form-group"> <label class="control-label col-sm-2"> start date </label> <div class="col-sm-10"> <datepicker></datepicker> </div> </div> <div class="form-group"> <label class="control-label col-sm-2"> end date </label> <div class="col-sm-10"> <datepicker></datepicker> </div> </div> ....
two things: - when declaring directive, use isolate scope.
i.e.
.directive('...', function() { return { .... // existing stuff scope: {} // gives each directive instance isolated scope } });
- i think 'datepicker' name of bootstrap directive already, if you're wrapping should consider giving different name.
Comments
Post a Comment