Datepicker не открывается дважды в angular -ui версии 0.11.0

Ответ 1

Быстрое исправление: Полностью удалил тег кнопки и изменил код datepicker, поэтому он выглядит так:

<input type="text" 
       datepicker-popup="dd-MMMM-yyyy"
       ng-model="cdate.customStartDate"
       is-open="cdate.customStartDate.open"
       ng-click = "cdate.customStartDate.open = true"
       max-date="maxDate"
       datepicker-options="dateOptions"
       date-disabled="disabled(date, mode)" 
       ng-required="true"
       close-text="Close"
       class="input-md" />

Ответ 2

У меня была та же проблема, благодаря которой я мог только открыть элемент выбора даты один раз с помощью кнопки, но он не откроется во второй раз. Проблема может быть связана с проблемой области, которая может возникнуть из-за того, что кнопка не является дочерним элементом входного элемента HTML. Мне удалось заставить кнопку работать, немного изменив модель данных. Например, вместо использования $scope.isDatePickerOpen в качестве модели я изменил на $scope.datePicker.isOpen (и установил is-open="datePicker.isOpen"). Обратите внимание, что новая модель данных для is-open не зависает непосредственно от $scope, но была перемещена на один уровень (с объекта $scope.datePicker). Это, по-видимому, делает данные более "доступными".

Другая вещь, которую я должен был сделать, - это изменить модель данных на таймер. Например:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

Во всяком случае, ваше обходное решение, описанное выше, было тем, что дало мне мотивацию продолжать поиск решения, поэтому спасибо!

Ответ 3

Найден ответ на другой вопрос StackOverflow, просто используйте is-open = "$ parent.isOpen"

fooobar.com/questions/140440/...

Ответ 4

У меня была та же проблема, но, просто поместив "открытый" логический var в объект, решил проблему для меня:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

Я так долго не использовал angular, но я думаю, что это проблема с областью, и тогда я узнал, что всегда хорошо иметь "точку в имени переменной"... (datePicker.opened)

(Теперь я вижу сообщение выше с аналогичным решением, но мне не нужно было использовать таймаут. Этот код был достаточно.)

Ответ 5

Я решил проблему следующим образом:

В html файле:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

и в файле Javascript я просто добавил тайм-аут, чтобы "уведомить", что он закрыт, чтобы снова открыть его:

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };

Ответ 6

У меня есть самое простое однострочное решение, которое не требует объектов контейнера, вызовов функций или других проблем, таких как preventDefault. Вам даже не нужно объявлять это в области видимости, потому что undefined оценивается как false.

...
  ng-click="dateOpened = !dateOpened"
...

Я тестировал это с помощью angular -ui 0.13.0 (Angular Bootstrap). Это работает, потому что вызов ng-click уже захватывает событие по умолчанию.

Ответ 7

Я решил эту проблему, добавив изменение is-open с "open" на "$ parent.opened" Вот так.

seanControllers.controller('TracksController', ['$scope',
  function($scope) {
    $scope.openCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };
  }
]);

<form>
  <label>Eindtijd</label>
  <div class="input-group">
    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm" ng-model="track.eindtijd" is-open="$parent.opened" />
    <span class="input-group-btn">
	<button class="btn btn-default" type="button" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </div>
</form>

Ответ 8

Просто изолируйте переменные состояния dataPicker.

$scope.dataPickerStates = {
  open1:false,
  open2:false
}

затем измените свой html на

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="dataPickerStates.open1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

и, наконец, ваш метод изменения состояния

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

что он.

Ответ 9

Такая же проблема, но вышеупомянутые решения не сработали для меня, оказывается, я не включал этот файл: ui-bootstrap-tpls-0.14.2.js.

Точка - убедиться, что вы включаете все файлы, упомянутые в примерной документации       

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Удачи!

Ответ 10

Вот объяснение этого поведения

AngularJS MTV Meetup: Лучшие практики (2012/12/11)

https://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=1870

вы можете написать его вот так.

 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="date_picker1.opened"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

В контроллере:

$scope.date_picker1 ={
    date: new Date(),
    opened: false;
 };
 $scope.open = function($event) {
     .....
     $scope.date_picker1.opened = true;
 };