angular-ui 버전 0.11.0에서 Datepicker가 두 번 열리지 않음

angular-ui 버전 0.11.0에서 Datepicker가 두 번 열리지 않음

2개의 날짜 피커를 가지려고 하고 있으며, Angular UI 버전 0.11.0을 사용하고 있습니다.

내 HTML 코드

<span ng-if="periods.period == 10">
     <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
     <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>

</span>


<span ng-if="periods.period == 10"> 
- 
    <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customEndDate" is-open="opened2"  min-date="cdate.customStartDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"  ng-required="true" close-text="Close" class="input-md" />
    <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>   
</span>

그리고 내 JS 코드는 '

                     $scope.disabled = function(date, mode) {
                      return ( mode === 'day' && ( date.getDay() === -1 || date.getDay() === 7 ) );
                     };

                     $scope.maxDate = new Date();


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

                            $scope[opened] = true;
                          };


                     $scope.dateOptions = {
                     'year-format': "'yy'",
                     'starting-day': 1
                     };

처음에는 버튼을 클릭하면 데이트 피커가 잘 열립니다.하지만 한번 열어본 후 문제는 다음에 버튼을 클릭해도 날짜 선택 팝업이 열리지 않는다는 것입니다.

같은 문제로 달력 보기 컨트롤을 버튼을 사용하여 한 번만 열 수 있는데 두 번째 열 수 없습니다.이 문제는 입력 HTML 요소의 하위 항목이 아니기 때문에 발생할 수 있는 범위 문제와 관련이 있을 수 있습니다.데이터 모델을 조금 변경하여 버튼을 작동시킬 수 있었습니다.를 들어, 「」를 , 「」를 사용합니다.$scope.isDatePickerOpen가가모 to로 .$scope.datePicker.isOpen set (set)is-open="datePicker.isOpen"은 is-open에 $scope 한 깊이 에서) $scope.datePicker에 의해의 「검색 가능이 향상되는 것 .이것에 의해, 데이터의 「찾기 쉬움」이 향상되는 것 같습니다.

또 다른 일은 타이머로 데이터 모델을 변경하는 것이었습니다.예를 들어 다음과 같습니다.

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

어쨌든, 위에 투고해 주신 회피책 덕분에, 저는 계속 해결책을 모색할 수 있었습니다.감사합니다.

Quick Fix: 버튼 태그를 모두 삭제하고 날짜 선택 코드를 수정하여 다음과 같이 표시했습니다.

<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" />

다른 StackOverflow 질문에 대한 답변을 찾았습니다. is-open="$parent.isOpen"을 사용하십시오.

https://stackoverflow.com/a/20213924/1596661

저도 같은 문제가 있었습니다만, 오브젝트에 「열린」부울 바를 넣는 것만으로 문제를 해결할 수 있었습니다.

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

angular를 사용한지 오래되지 않았지만 스코프의 문제인 것 같습니다만, 「변수명에 점」을 붙이면 항상 좋다는 것을 알았습니다.( datePicker . opened )

(상기에도 같은 솔루션이 기재되어 있습니다.하지만 나는 타임아웃을 사용할 필요가 없었다.이 코드면 충분합니다.)

저는 문제를 이렇게 해결했습니다.

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);              
    };

컨테이너 객체, 함수 호출 또는 prevent Default와 같은 기타 번거로운 작업이 필요하지 않은 가장 쉬운 한 줄 솔루션을 보유하고 있습니다.정의되지 않은 것은 false로 평가되므로 범위 내에서 선언할 필요도 없습니다.

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

이것을 angular-ui 0.13.0(Angular Bootstrap)으로 테스트했습니다.이는 ng-click 호출이 이미 기본 이벤트를 트랩하고 있기 때문에 작동합니다.

is-open을 "opened"에서 "$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>

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;
};

바로 그겁니다.

같은 문제지만 위의 해결방법은 나에게 효과가 없었습니다.이 파일에는 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">

행운을 빕니다.

다음은 이 동작에 대한 설명입니다.

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;
 };

이렇게 많은 답을 보니까.저에게 효과가 있었던 것은 다음과 같습니다.

$scope.datePicker = {
  date_opened:false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

HTML 템플릿:

<div class="input-group">
    <input name="date_obj_from" type="text" class="form-control" uib-
    datepicker-popup="dd-MMMM-yyyy" ng-model="date_obj_from" is-
    open="datePicker.date_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_from($event)">
    <i class="glyphicon glyphicon-calendar"></i>
       </button>
    </span>
</div>

이 문제를 해결하기 위해 $timeout을 사용할 필요는 없습니다.내 말은 누군가가 그것을 필요로 하지 않는다면.is-open="date_opened" 속성을 is-open="datePicker.date_opened"로 변경하여 이 문제를 해결했습니다.오브젝트에 키를 초기화하는 것은 항상 베스트 프랙티스입니다.

언급URL : https://stackoverflow.com/questions/23474054/datepicker-not-opening-twice-in-angular-ui-version-0-11-0