How to have at least two datepickers of ui-bootstrap on a single page?

Question

I want to have several datepickers on a page. But with the default solution from UI-Bootstrap it is not possible, no one of datepickers may be opened. The conflict with each other. Here is my code:

<div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </div>

I just did a copy/paste of the datepicker code from the site http://angular-ui.github.io/bootstrap/#/datepicker. They conflict with each other. When I click <input> field to open a datepicker no one can be opened properly, both are opened for a second and immediately disappear.

How may I have several datepickers on a single page?

agree with @aet and also use a different `is-open` variable for each — charlietfl, Oct 27 '13 at 01:26
The solution is to use a different variable for the ```is-open``` attribute. If you don't do that the ui-bootstrap stuff can't keep up with which one is open. @Green should select one of the answers below as the accepted answer. — boatcoder, Jul 16 '14 at 03:02
possible duplicate of [How to usemultiple Angular UI Bootstrap Datepicker in single form?](http://stackoverflow.com/questions/22269964/how-to-usemultiple-angular-ui-bootstrap-datepicker-in-single-form) — Gaurav Gandhi, Sep 22 '15 at 11:58

score 79 · Answer 1 · edited Dec 13 '15 at 17:27

79

Rather than using a different function you can use a different is-open attribute and then pass the attribute in through the ng-click function. You still need different models:

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

And inside controller:

   $scope.open = function($event,opened) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope[opened] = true;
  };

edited Dec 13 '15 at 17:27

Matt

9,068
12
64
84

answered Feb 18 '14 at 21:25

BlueMonk

791
6
3

Interestingly enough, I didn't need to define my own open() method in the controller and this simply worked for me out of the box. – th3morg Apr 24 '14 at 20:29
How can I do the same for whole application? – Vipul May 13 '14 at 07:47
1

I'v changed to a toggle behaviour here http://stackoverflow.com/a/23764727/2411379 – Toni Gamez May 20 '14 at 15:58
Dont use caps on `is-open` field – udnisap Jun 14 '14 at 13:32
3

this actually did work for me. not sure what your angularjs is smokin @rar? what helped me was @Toni Gamez's link to the toggle function. No need to actually rename the function but it helped to see it simplified in the link he provides in the comments above... – FireDragon Feb 10 '15 at 05:40
"not sure what your angularjs is smokin" has been much of my experience with angular so far :) – muttley91 Feb 10 '15 at 15:03
3

This didn't work for me. This did though: `` – Cheese Widget Jul 14 '15 at 21:10
Note for people who can't get this to work, make sure you have single quotes wrapped around opened, and opened2. Otherwise it won't work. – stepquick Jul 23 '15 at 20:27
Works great here. Easily turned into a toggle as well with `$scope[opened] = !$scope[opened]` – Bjorn 'Bjeaurn' S Feb 02 '16 at 21:06

score 15 · Answer 2 · answered Feb 05 '15 at 15:59

I'm still learning Angular and UI-Bootstrap, so take that into account when reading my answer. I did something similar to BlueMonk, but in a flexible way that keeps my controller code from having to know about the instances of the datepicker on the page.

I put all of the datepicker code in my controller into a single namespace:

$scope.datePicker = (function () {
    var method = {};
    method.instances = [];

    method.open = function ($event, instance) {
        $event.preventDefault();
        $event.stopPropagation();

        method.instances[instance] = true;
    };

    method.options = {
        'show-weeks': false,
        startingDay: 0
    };

    var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    method.format = formats[0];

    return method;
}());

And then used the following markup:

<p class="input-group">
    <input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

<p class="input-group">
    <input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

This worked like a charm for me.

@JerryBensonMontgome my use case involves a dynamic set of rows that can grow (by clicking Add Another button), wherein one column corresponds to a date field that must be enriched by a datepicker. In that case, how do I use your elegant approach? — Web User, Apr 15 '15 at 22:05
If you just pass in a custom string for each row (where I have 'dateHired' and 'dateFired') you should be fine. I typically use some static text concatenated with some sort of row id when I do this type of thing. Heck, a randomly generated number would work because I don't think you (as the developer) ever need to know what it is. I haven't used this solution in a scenario like yours, but I think it should work. — Jerry Benson-Montgomery, Apr 16 '15 at 23:19
This looks very elegant, but I get an undefined error on this line: method.instances[instance] = true; — Will Strohl, Oct 03 '15 at 20:33
I've asked a follow-up question here: http://stackoverflow.com/questions/32927394/typeerror-undefined-on-module-pattern-of-object-instances — Will Strohl, Oct 03 '15 at 20:53

score 10 · Answer 3 · answered Jan 04 '14 at 07:20

This should work (different models, open flag, and functions):

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <button class="btn" ng-click="open1()"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <button class="btn" ng-click="open2()"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

And inside controller:

   $scope.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
  };

   $scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened2 = true;
  };

This should not work, and should throw 'preventDefault' of undefined. to solve the error you pass $event to your functions. It still wont solve the problem. As the two will still conflict. It didnt work for me. — Jay, Nov 13 '14 at 12:36
This works. But you have to pass $event into `open1($event)` and `open2($event)` functions. — Wild Goat, Aug 02 '15 at 13:24

score 1 · Answer 4 · answered Mar 06 '17 at 14:02

Here is what worked for me: $id is scope id, provided by angular.

    ctrl.opened = {};
    ctrl.openDatatimePicker = function ($event, id) {
        $event.preventDefault();
        $event.stopPropagation();
        ctrl.opened[id] = true;
    }

                                            <input type="text" 
                                                   class="form-control" 
                                                   uib-datepicker-popup="{{vm.datepickerFormat}}"
                                                   ng-model="x.FraDato" 
                                                   is-open="vm.opened[$id]"
                                                   datepicker-options="vm.datepickerOptions"
                                                   ng-required="true" 
                                                   ng-click="vm.openDatatimePicker($event,$id)"/>

score 0 · Answer 5 · answered Jul 03 '14 at 22:27

No Additional changes are necessary. As long as you wrap each date input in it's own controller div the scope will reside with that input

Example:

<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
        <button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
    </div>
</div>
<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
        <button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
    </div>
</div>

Actually he does have to make changes, ng-model="dt" buried in another controller like that will be useless. He needs to use ```something.startOn```, ```something.endOn``` so the variables are made available on the surrounding scope. Otherwise this is a pretty cool trick with controllers. — boatcoder, Jul 16 '14 at 03:05

Ashutosh Raj · Answer 6 · 2015-05-27T11:29:50.883

0

though its an old question but answring for someone who fall in to same problem as i did.

i assigned the datepicker onfocus to that element and it workd great. Sample code.

   $(document).on('focus','.datepicker',function(){
        $(this).datepicker();
   });

edited May 27 '15 at 11:29

answered May 27 '15 at 11:14

Ashutosh Raj

1,045
1
11
21

score 0 · Answer 7 · answered Dec 10 '18 at 02:14

Can open multi datepickers of ui-bootstrap on a single page

JS

  $scope.open = {};
  $scope.openCalendar = function (e, date) {
    e.preventDefault();
    e.stopPropagation();

    if ($scope.open[date] === true) {
      $scope.open = {};
    } else {
      $scope.open = {};
      $scope.open[date] = true;
    }
  };

HTML

<input type="text" id="created1" name="created1" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created1')" placeholder="0000/00/00 00:00" is-open="open.created1" autocomplete="off" class="form-control" ng-model="vm.condition.created1">

<input type="text" id="created2" name="created2" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created2')" placeholder="0000/00/00 00:00" is-open="open.created2" autocomplete="off" class="form-control" ng-model="vm.condition.created2">

How to have at least two datepickers of ui-bootstrap on a single page?

7 Answers7

Linked