Angular UI - 2 datepickers on same page

Question

I am beginner in Angular JS and I am currently trying to use datepicker from Angular UI library.

The problem that i want to solve is that when I open the first but don't pick a date and then click on the second datepicker, the second just go over the first one, then I want that when I click on the second datepicker it automatically close the first one, I have tried many solutions but any of those work so if you have any idea, let me know !

Here is my HTML markup:

<div class="col-md-2">
    <p class="input-group date-picker" data-ng-controller="DatePickerController">
    <input type="text" name="check-in" placeholder="Check in" class="form-control" datepicker-popup="{{ format }}" data-ng-model="dt" is-open="opened1" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default icon-field" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
    </p>
</div>

<div class="col-md-2">
    <p class="input-group date-picker" data-ng-controller="DatePickerController">
    <input type="text" name="check-out" placeholder="Check out" class="form-control" datepicker-popup="{{ format }}" data-ng-model="dt" is-open="opened2" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default icon-field" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
    </p>
</div>

And here is the Javascript: controllers.DatePickerController = function($scope) {

$scope.today = function() {
    $scope.dt = new Date();
};
$scope.today();

$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.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened2 = false;
    $scope.opened1 = true;
};

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened1 = false;
    $scope.opened2 = true;
};

$scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
};

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

};

Thanks in advance !

EDIT: The problem went from the data-ng-controller declaration, because a new controller was declarated for each one, the scope was not "shared", beginner mistake ! Thank you for your help !

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I have recently struggled with this and one solution that works is to follow the solution of the guy with 8 upvotes at How to have at least two datepickers of ui-bootstrap on a single page? or you can try angular strap. For my needs angular strap was the way to go and you can find my plunker at http://plnkr.co/edit/YTK6WM.

edited May 23 '17 at 12:27

Community

1
1

answered May 20 '14 at 19:58

Ronald91

1,736
1
15
23

Thank you for your answer, I already tried this solution that doesn't work for my problem. Additionnally, I don't understand this syntax $scope[opened]. So if someone has another idea, it would be great ! – ChrisV May 21 '14 at 22:06

score 0 · Answer 2 · answered May 30 '14 at 05:32

Here's an example with two date pickers. Each has a boolean scope variable to determine whether the popup is open, and a open() function that opens one and closes the other.

HTML:

        <div class="form-group">
            <label for="coverDate" class="col-sm-4 control-label">Cover Date</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input name="coverDate" class="form-control" type="text" datepicker-popup="yyyy-MM-dd" ng-model="workingCopy.coverDate" is-open="openedCover" ng-required="true" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="openCover($event)">&#x25be;</button>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="goLiveDate" class="col-sm-4 control-label">Go-Live Date</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input name="goLiveDate" class="form-control" type="text" datepicker-popup="yyyy-MM-dd" ng-model="workingCopy.goLiveDate" is-open="openedGoLive" ng-required="true" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="openGoLive($event)">&#x25be;</button>
                    </span>
                </div>
            </div>
        </div>

JS:

$scope.openCover = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.openedCover = true;
    $scope.openedGoLive = false;
};

$scope.openGoLive = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.openedCover = false;
    $scope.openedGoLive = true;
};

$scope.openedCover = false;
$scope.openedGoLive = false;

Thank you nerff ! I understand perfectly this way of doing that is the same than mine but it doesn't work for me... Have you tested it ? Is it working for you ? — ChrisV, Jun 04 '14 at 10:25

Angular UI - 2 datepickers on same page

2 Answers2