angularjs datepicker按ESC关闭后再次点击无法打开如何解决

问题根因 #

按下ESC键关闭日期选择器时，AngularJS datepicker 内部的焦点状态、打开状态标记没有被正确重置，组件默认判定焦点仍处于选择器相关区域，因此再次点击只读文本框时，不会触发选择器唤起逻辑，只有点击外部区域触发全局blur事件重置内部标记后才能正常打开。 #

可用解决方案 #

方案1：强制绑定is-open状态，跳过内部状态校验（最简便） #

多数AngularJS datepicker组件（尤其是ui-bootstrap系列）都支持is-open参数控制选择器的显示隐藏，直接在点击事件中强制将该参数设置为true即可覆盖内部的状态判断：

<!-- 输入框绑定示例 -->
<input 
  type="text" 
  readonly
  ng-model="selectedDate"
  datepicker-popup="yyyy-MM-dd"
  is-open="datePickerOpen"
  ng-click="openPicker($event)"
>

对应的控制器代码：

angular.module('yourApp', ['ui.bootstrap'])
.controller('DateController', ['$scope', function($scope) {
  $scope.datePickerOpen = false;

  $scope.openPicker = function(e) {
    e.preventDefault();
    e.stopPropagation();
    // 每次点击强制设为true，无视内部状态
    $scope.datePickerOpen = true;
  };
}]);

方案2：监听ESC按键，手动重置状态 #

如果方案1无效，可以额外监听ESC按键事件，关闭选择器后手动重置焦点标记：

// 在控制器中新增ESC监听逻辑
$scope.handleKeydown = function(e) {
  // ESC键对应的keyCode为27
  if (e.keyCode === 27) {
    e.preventDefault();
    $scope.datePickerOpen = false;
    // 手动触发输入框失焦再聚焦，重置组件内部焦点标记
    e.target.blur();
    e.target.focus();
  }
};

在输入框上绑定按键事件：

<input 
  ...
  ng-keydown="handleKeydown($event)"
>

方案3：点击时强制重置状态 #

不想额外监听按键的话，可以在点击事件中先关闭再打开选择器，强制刷新状态：

// 注意使用该方案需要在控制器中注入$timeout依赖
$scope.openPicker = function(e) {
  e.preventDefault();
  e.stopPropagation();
  $scope.datePickerOpen = false;
  // 用$timeout触发下一次事件循环再打开，避免状态更新不生效
  $timeout(() => {
    $scope.datePickerOpen = true;
  }, 0);
};

内容的提问来源于stack exchange，提问作者ANEES