2017-05-01 13 views
5

fiddleの例では、md-open-on-focusを使用するとmd-datepickerを何度も開くと矛盾しているようです。この問題は最初に開いて閉じた後に発生します(これは正常です)。その後、クリックするとランダムに開き、不安定になります。角材 "md-datepicker"指令 - "md-open-on-focus"問題

<md-datepicker ng-model="timeModel" md-hide-icons="all" md-open-on-focus></md-datepicker> 

誰も同じ動作を経験して解決策を見つけましたか?ありがとう。

答えて

2

現在、一緒に使用md-hide-icons="all"md-open-on-focusに問題があり、、焦点は入力に残ります。しかし、クリックするアイコンがなく、フォーカスがすでに入力されているので、datepickerを開くことはできません。あなたは、外部のをクリックして、再び外をクリックした場合

、入力からフォーカスがなくなって、それは間違いなく期待される動作であるべきにそこから正常に動作します。

しかし、このような振る舞いが望ましくない場合は、変更することができます。 datePickerコードを見てみた今

は、closeCalendarPane機能では、彼らは入力にフォーカスを維持する責任がある

self.calendarPaneOpenedFrom.focus(); 

を持っています。削除すると、外からクリックする(またはピッカーから日付を選択する)ときにフォーカスが失われます。これは、まさに私たちが望むものです。 openOnFocusが真であるが、それがどのように役立つかわからないとき、彼らは何らかのコード処理入力を持っている!

Forked jsfiddle(変更された行が#31449である)

はまた、ライブラリのコードを変更することは、我々が正常にしたいと思うものではありません。だから、今のところ、あなたは

・ホープ[@quirimmoで述べたように] md-is-openにコールバックを持って、お好みの方法(jQuery/angular.elementまたは純粋なJS)を使用してコールバックの内側に入力要素からフォーカスを削除するなどの回避策を持っている可能性がありそれは助ける!

1

残念ながら、この機能はまだ角度のある素材では実装されていません。 公式の例を見ると、md-open-on-focusを使用した場合と同じ動作になります。 https://material.angularjs.org/1.1.0/demo/datepicker

動作させるには少しの回避策が必要です。ちょうどあなたの例のコードを変更:

HTML:

<md-datepicker ng-model="timeModel" md-hide-icons="all" md-is-open="isOpen" md-open-on-focus></md-datepicker> 

JS:

angular.module('sandbox', ['ngMaterial']) 
.controller('Ctrl', function($scope, $timeout) { 
    $scope.timeModel = new Date(); 
    $scope.$watch('isOpen', function(newValue, oldValue) { 
    if (!newValue && oldValue) { 
     document.querySelector('.md-datepicker-input').blur(); 
    } 
    }); 
}); 

https://jsfiddle.net/ecs9ao89/

また、同じ行動新しいディレクティブを定義するとの基本日付ピッカーを必要とを達成することができます角度のある素材をクリックして開きます。 しかし、この解決策は、より少ない努力です。あなたが外でクリックしたときに

関連する問題