Question

正如此fiddle中所示，使用md-datepicker时多次打开md-open-on-focus似乎存在不一致问题。第一次打开和关闭它后会出现问题（这样可以正常） - 之后它会在点击时随机打开并且会不稳定。

<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为真时，它们会有一些代码处理输入，但不确定它是如何帮助的！

Forked 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/

您也可以实现定义新指令的相同行为，并且需要角度材质的基本日期选择器，并在单击时打开它。但这种解决方案的努力较小。

Angular-Material“md-datepicker”指令 - “md-open-on-focus”问题

2 个答案: