角度材料"md-datepicker"指令 - "md-open-on-focus"问题

Question

如本小提琴中的示例所示，使用md-open-on-focus时多次打开md-datepicker似乎存在不一致的问题。

第一次打开和关闭它后出现问题(工作正常) - 之后，它会在单击时随机打开并变得不稳定。

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

有没有人经历过同样的行为并找到了解决方案？谢谢。

Answer 1

目前，md-hide-icons="all"和md-open-on-focus一起使用的问题在于，当您单击外部时，焦点仍停留在输入上。但是，由于没有要单击的图标并且焦点已经在输入上，因此我们无法打开日期选择器。

如果单击外部，然后再次单击外部，则输入的焦点将消失，它将从那里正常工作，这可以说是预期的行为。

但是，如果您不希望这种行为，我们可以做一些事情来改变它！

现在，看看datePicker代码，在closeCalendarPane函数中，他们有

self.calendarPaneOpenedFrom.focus();

负责将重点放在输入上。如果我们删除它，它在单击外部(或从选择器中选择日期)时会失去焦点，这正是我们想要的。当openOnFocus为真时，他们有一些代码处理输入，但不确定这有什么帮助！

分叉的 jsfiddle(更改的行位于 #31449)

此外，更改库代码不是我们通常想要做的。因此，就目前而言，您可以有一个解决方法，例如在md-is-open上回调并使用您喜欢的方式(jQuery/angular.element或纯 JS)从回调中的输入元素中删除焦点[如@quirimmo所述]

希望对您有所帮助！

Answer 2

不幸的是，此功能尚未在角度材料中实现。 如果你看一下官方的例子，你会在使用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/

您还可以实现相同的行为，定义新指令并要求角度材料的基本日期选择器，并在单击时将其打开。 但这种解决方案工作量较小。