(Angular+Bootstrap）如何阻止两个日期选择器被同一按钮打开

(Angular + Bootstrap) How to stop two datepickers from being opened by the same button

本文关键字：按钮 选择器 两个 Angular+Bootstrap 何阻止 日期      更新时间：2023-09-26

我有一个网页，需要两个日期选择器，开始日期和结束日期。问题是，每当我点击字形打开日期选择器时，两个日期选择器都会同时打开。

这是我的模板，指令，控制器和它是如何使用的。任何帮助都将不胜感激。

模板：

<div class="input-group">
    <input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="start_date" is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

指令：

'use strict';
/*global angular*/
angular.module("myApp")
.directive("datepicker", function(){
    return{
        templateUrl: 'templates/datePicker.html',
        controller: 'newDateCtrl',
        replace: true
    };
});

控制器

/*global angular*/
angular.module("myApp").controller("newDateCtrl", function($scope) {
    $scope.popup = {
        opened: false
    };
    $scope.open = function() {
        $scope.popup.opened = true;
    };
    $scope.dateOptions = {
        formatYear: 'yy',
        maxDate: new Date(2020, 5, 22),
        minDate: new Date(),
        startingDay: 1
    };
})

index.html，作为如下表单的一部分：

....
<div class="form-group">
    <label class="control-label col-sm-2">
        Start Date
    </label>
    <div class="col-sm-10">
        <datepicker></datepicker>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2">
        End Date
    </label>
    <div class="col-sm-10">
        <datepicker></datepicker>
    </div>
</div>
....

两件事：-在声明指令时，请使用隔离作用域。

即

.directive('...', function() {
  return {
   .... // your existing stuff
   scope: {} // this gives each directive instance isolated scope
  }
});
  • 我认为"datepicker"已经是引导指令的名称，所以如果你要包装它，你应该考虑给它一个不同的名称
相关文章：