2

日付範囲に angular-ui ブートストラップを使用しようとしています。

http://angular-ui.github.io/bootstrap/#/datepicker

リンクにはいくつかの良い例が含まれています。controller asただし、上記のリンクに示されているように、スコープではなく構文を使用したいと考えています。

以下に示すように、私はそれを試みました。しかし、クリックしてもカレンダーボックスが表示されません。エラーも返されないので、何をする必要があるのか​​ 少し迷っています。私の例は近いと思います。

これが私のフィドルの試みです

以下のコードスニペット..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div class="input-group">

          <input type="text" 
            class="form-control date" 
            id="dateFrom" 
            placeholder="From" 
            ng-click="demo.open($event)"   
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtFrom" 
            is-open="demo.dateFrom" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >


          <input type="text" 
            class="form-control date" 
            id="dateTo"   
            placeholder="To" 
            ng-click="demo.open($event)"  
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtTo" 
            is-open="demo.dateTo" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >

      </div>

  </div>

</div>
</body>
4

1 に答える 1

6

ここでの問題は、UI Bootstrap 0.11.0 以降、「フォーカス時に開く」が削除されたことにあるようです。（ソースを参照）

以下の plunkr は、ng-click を使用して日付ピッカーを開く 1 つの可能な回避策を示しています。

現在の ng-click を dateFrom 入力から次のように変更します。

ng-click="demo.dateFrom=true"

および dateTo の入力フィールドを次のようにします。

ng-click="demo.dateTo=true"

Plunkr - ワーキング ブートストラップの日付ピッカー

以下のソースは、ng-click を使用するのではなく、フォーカス時に日付ピッカーを開くソリューションを探している場合の他のいくつかの回避策を示しています。

ソース: UI Bootstrap Github

于 2015-01-29T18:55:00.240 に答える