web-dev-qa-db-ja.com

Angular-UIバージョン0.11.0でDatepickerが2回開かない

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

`最初に、ボタンをクリックすると、datepickerが正常に開きます。ただし、一度開くと、問題は、次回ボタンをクリックしたときにdatepickerポップアップが開かないことです。

javascriptangularjsdatepickerangular-uiangular-ui-bootstrap
39
Aniket Sinha

クイック修正：ボタンタグを完全に削除し、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" />
41
Aniket Sinha

ボタンを使用して日付ピッカーコントロールを開くことができるのは同じ問題でしたが、2度目は開きません。この問題は、ボタンが入力HTML要素の子ではないために発生する可能性のあるスコープの問題に関連している可能性があります。データモデルを少し変更することで、ボタンを機能させることができました。たとえば、モデルとして$scope.isDatePickerOpenを使用する代わりに、$scope.datePicker.isOpenに変更しました（そしてis-open="datePicker.isOpen"を設定しました）。 is-openの新しいデータモデルは$scopeから直接ハングアップするのではなく、1レベル深い（$scope.datePickerオブジェクトから）移動したことに注意してください。これにより、データがより「検索可能」になります。

私がしなければならなかった他のことは、タイマーのデータモデルを変更することでした。例えば：

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

とにかく、上記の投稿された回避策が解決策を探し続ける動機を与えてくれたので、ありがとう！

55
Exemel

他のStackOverflowの質問に対する答えが見つかりました。is-open= "$ parent.isOpen"を使用してください

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

31
KCWebMonkey

私は同じ問題を抱えていましたが、単にオブジェクトに「開かれた」ブール変数を入れるだけで問題が解決しました：

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

長い間angularを使用していませんが、これはスコープの問題だと思います。その後、「変数名にドット」を含めることが常に良いことを学びました... ）

（今、上記の投稿で同様の解決策が見られます。しかし、タイムアウトを使用する必要はありませんでした。このコードで十分でした。）

16
c_sandborg

私はこのような問題を解決しました：

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);              
    };
11
Abdellah Alaoui

不要コンテナオブジェクト、関数呼び出し、またはpreventDefaultのような他の手間がかかる、最も簡単な1行のソリューションがあります。 undefinedはfalseと評価されるため、これをスコープで宣言する必要さえありません。

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

これを、angular-ui 0.13.0（Angular Bootstrap）でテストしました。これは、ng-clickの呼び出しが既にデフォルトイベントをトラップしているために機能します。

3
FlavorScape

このように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>
2
PieterVK

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

それでおしまい。

2
Sándor Tóth

同じ問題ですが、上記の解決策はうまくいきませんでした。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">

幸運を！

1
Don F

たくさんの答えを見た後。私のために働いたのは以下のようなものです：

$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を使用する必要はありません。もし誰かがそれを必要としないなら、私は意味します。 attribue is-open = "date_opened"をis-open = "datePicker.date_opened"に変更して、この問題を修正しました。常にオブジェクトのキーを初期化するベストプラクティスです。

0
Shoaib Ahmad

この動作について説明します

AngularJS MTV Meetup：ベストプラクティス（2012/12/11）

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

このように書くことができます。

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