Question

我相信我已经遵循了其他人的建议，例如“如何在一个页面上至少有两个ui-bootstrap的日期选择器？”的答案。并成功将其中两个合并到我的页面上。虽然我可以无休止地编辑每个日期的文本版本，但我只能让每个日期的弹出日历只出现一次。额外点击日历图标似乎什么都不做。

我做错了什么？我没有看到这是预期的行为，或者我没有留下或意外包含的选项。

相关的html是：

<div>
  <input type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" close-text="Close" />
  <button type="button" ng-click="open($event,'openedStart')"></button>
  <input type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" datepicker-options="dateOptions" close-text="Close" />
  <button type="button" ng-click="open($event,'openedEnd')"></button>

相关的js代码是：

$scope.openedStart = false;

$scope.openedEnd = false;

$scope.format = "dd.MM.yyyy";

$scope.open = function($event,opened) {
  $event.preventDefault();
  $event.stopPropagation();

  $scope[opened] = true;
};

Answer 1

尝试创建对象。像这样：

HTML：

<input type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="opened.openedStart" datepicker-options="dateOptions" close-text="Close" />
<button type="button" ng-click="open($event,'openedStart')"></button>
<input type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="opened.openedEnd" datepicker-options="dateOptions" close-text="Close" />
<button type="button" ng-click="open($event,'openedEnd')"></button>

你的控制器：

$scope.opened = {};
$scope.opened.openedStart = false;
$scope.opened.openedEnd = false;

$scope.open = function($event,datepicker) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.opened[datepicker] = true;
};

ui-bootstrap的两个日期选择器在一个页面上每次弹出一次

1 个答案: