Angular UI - 同一页面上的 2 个日期选择器

Question

我是 Angular JS 的初学者，我目前正在尝试使用 Angular UI 库中的 datepicker。

我要解决的问题是，当我打开第一个但不选择日期然后单击第二个日期选择器时，第二个只是越过第一个，然后当我单击第二个日期选择器它会自动关闭第一个，我尝试了很多解决方案，但其中任何一个都有效，所以如果您有任何想法，请告诉我！

这是我的 HTML 标记：

<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>

这里是 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];

};

提前致谢！

编辑： 问题出在 data-ng-controller 声明中，因为为每个控制器声明了一个新控制器，范围没有“共享”，初学者错误！感谢您的帮助！

Answer 1

我最近一直在努力解决这个问题，一个有效的解决方案是在How to have at least two datepickers of ui-bootstrap on a single page? 上跟随那个获得 8 个赞成票的人的解决方案，或者您可以尝试 angular strap。对于我的需要，角带是最好的选择，您可以在http://plnkr.co/edit/YTK6WM 找到我的 plunker。

Answer 2

这是一个包含两个日期选择器的示例。每个都有一个布尔范围变量来确定弹出窗口是否打开，以及一个打开和关闭另一个的 open() 函数。

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;