Question

我正在使用两个uib日期选择器

onclick事件正在打开两个日历。

我该如何解决这个问题？

我的代码：

HTML

<div class="row">
  <div class="col-md-6">
    <p>From date - </p>
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" show-button-bar="false"
        ng-model="fd" is-open="opened" min-date="minDate" max-date="'2019-06-22'" datepicker-options="dateOptions"
        date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"
        name="from_date" />
      <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
    </p>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <p>To date - </p>
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" show-button-bar="false"
        ng-model="td" is-open="opened" min-date="minDate" max-date="" datepicker-options="dateOptions"
        date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"
        name="to_date" />
      <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="opendate($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
    </p>
  </div>
</div>

我的控制器：

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

$scope.clear = function () {
  $scope.fd = null;
  $scope.td = 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.open = function ($event) {
  $event.preventDefault();
  $event.stopPropagation();

  $scope.opened = true;
};

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

  $scope.opened = true;
};

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

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

Answer 1

对于datepicker，您只使用了一个变量$scope.opened。

您必须使用两个单独的范围变量，例如

$scope.openDatePicker1 //and  
$scope.openDatePicker2

并需要将这些变量分配给

is-open="openDatePicker1" //and 
is-open="openDatePicker2"

分别为每个日期选择器。

希望它能解决你的问题。

Answer 2

因为你已经为uib-datepicker

使用了相同的开放变量

var app = angular.module('plunker', 
['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.today = function() { 
    $scope.fd = new Date();
    $scope.td = new Date();
};
$scope.today();

$scope.clear = function () {
    $scope.fd = null;
    $scope.td = 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.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
};

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

    $scope.opened2 = true;
};

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

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

LIVE DEMO

onclick事件它打开了两个日历

2 个答案: