I use bootstrap ui library in Angular JS. Here there is Datepicket element.
How I can show datepicker in two inputs?
Link to library
I tried:
<input type="text" datepicker-popup="{{format}}">
<input type="text" datepicker-popup="{{format}}">
But this way opens inputs together
You need to provide minimum required attributes and without using ng-model how do you retrieve the date from the datepicker.
try using like this :
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />
add this script in your controller :
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
While ritesh's answer might correct it, the explanation isn't clear.
The reason you are having both open at the same time is because of this: is-open="opened".
The is-open is used to open the specified datepicker when this scope value is true. You mapped both datepickers to the same value. So when you call open($event) and set $scope.opened = true, it opens both.
What you really want to do is have a different function you call that sets the correct variable. So change the HTML to:
<input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />
<input type="text" ng-click="open2($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel2" is-open="opened2" />
And then add the function to your controller:
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
See Plunkr
I looked into your plunker,it was opening two datepickers at once because $event was passed as opened for both input texts.
Change your input text to this
<input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />
<input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel2" is-open="opened2" />
Here is the working plunker
ng-clicksets a variable like the example in the documentation?