Question

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

我想要解决的问题是，当我打开第一个但没有选择日期然后点击第二个日期选择器时，第二个只是翻过第一个，然后当我点击时我希望在第二个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声明，因为为每个控制器声明了一个新的控制器，范围不是＆＃34;共享＆＃34;，初学者错误！谢谢你的帮助！

Answer 1

我最近一直在努力解决这个问题，一个有效的解决方案是在How to have at least two datepickers of ui-bootstrap on a single page?跟随8个upvotes的家伙的解决方案，或者你可以试试角带。根据我的需要，角斗带是最佳选择，您可以在http://plnkr.co/edit/YTK6WM找到我的羽毛球。

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;

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

2 个答案: