Góc-vật liệu "md-datepicker" chỉ thị - "md-datepicker" chỉ thị

Question

Như được kiểm tra trong fiddle này, có vẻ như là sự cố không nhất quán khi mở md-datepicker nhiều lần khi sử dụng md-open-on-focus. Vấn đề xảy ra sau khi mở và đóng nó lần đầu tiên (hoạt động tốt) - sau đó nó sẽ ngẫu nhiên mở khi nhấp và sẽ không ổn định.

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

Có ai có cùng hành vi và tìm ra giải pháp không? Cảm ơn.

Answer 1

Hiện nay, vấn đề với md-hide-icons="all" và md-open-on-focus sử dụng cùng là, khi bạn nhấp bên ngoài, trọng tâm vẫn còn trên đầu vào. Tuy nhiên, vì không có biểu tượng nào để nhấp và tiêu điểm đã có trên đầu vào nên không có cách nào để chúng tôi có thể mở datepicker.

Nếu bạn click bên ngoài, và nhấp vào bên ngoài một lần nữa, tập trung từ đầu vào đã biến mất, và nó sẽ làm việc bình thường từ đó trên mà nên coi là có hành vi dự kiến ​​.

Nhưng nếu bạn không muốn hành vi như vậy, chúng tôi có thể làm điều gì đó để thay đổi nó!

Bây giờ, có một cái nhìn vào mã datePicker, trong closeCalendarPane chức năng, họ có

self.calendarPaneOpenedFrom.focus(); 

đó là trách nhiệm giữ tập trung vào đầu vào. Nếu chúng tôi xóa nó, nó sẽ mất tập trung khi nhấp vào bên ngoài (hoặc chọn ngày từ bộ chọn) chính xác là những gì chúng tôi muốn. Họ có một số đầu vào xử lý mã khi openOnFocus là đúng nhưng không chắc chắn cách giúp!

Forked jsfiddle (thay đổi dòng ở vị trí # 31.449)

Ngoài ra, thay đổi mã thư viện không phải là những gì chúng ta sẽ thường muốn làm.Vì vậy, bây giờ, bạn có thể có một cách giải quyết giống như có một callback trên md-is-open và loại bỏ sự tập trung từ các yếu tố đầu vào bên trong gọi lại bằng cách yêu thích của bạn (jQuery/angular.element hoặc tinh khiết JS) [Như đã đề cập bởi @quirimmo]

Hope những sự giúp đỡ đó!

Answer 2

Rất tiếc, chức năng này chưa được triển khai trong tài liệu góc. Nếu bạn xem qua các ví dụ chính thức, bạn sẽ thấy hành vi tương tự trong hành vi sử dụng md-open-on-focus. https://material.angularjs.org/1.1.0/demo/datepicker

Bạn cần giải pháp ít để làm cho nó hoạt động. Chỉ cần thay đổi mã ví dụ của bạn:

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/

Bạn có thể đạt được cũng là hành vi tương tự xác định một chỉ thị mới và đòi hỏi datepicker cơ sở của vật liệu góc cạnh và mở nó khi nhấp. Nhưng giải pháp này là nỗ lực nhỏ hơn.