如何修复 Flatpickr 重新创建答案

【问题标题】：How to fix about Flatpickr recreate如何修复 Flatpickr 重新创建
【发布时间】：2017-07-17 03:21:22
【问题描述】：

我使用flatpickr angular 1.5.0，es6 env，flatpickr 版本是3.0.6，我绑定了一个输入事件打开flatpickr，当日历打开时，它立即关闭，但是当我使用触摸板点击输入时，不点击，效果很好。有什么问题？

我尝试使用jQuery绑定事件，结果是一样的。我的操作系统是 Mac。

我的片段：

import flatpickr from 'flatpickr'

$scope.showPicker = function() {
  flatpickr(document.getElementById('date-input'), {
    locale: zh.zh,
    onChange: function(selectedDates, dateStr) {
      $scope.currDay = dateStr
      $scope.reqDetail($stateParams.gid, dateStr)
    }
  })
}

<input
  ng-model="currDay"
  readonly="readonly"
  id="date-input"
  ng-click="showPicker()"
>

我在官方issue里问过，维护人员说不是插件自己的问题。

我该如何解决这个问题？

【问题讨论】：

标签： angularjs flatpickr

【解决方案1】：

我解决了，问题是因为重新创建了无限次，我是这样解决的：

$scope.fpCache = []
$scope.showPicker = function() {
if($scope.fpCache.length == 0) {
  const fp = new Flatpickr(document.getElementById('date-input'), {
    locale: zh.zh,
    onChange: function(selectedDates, dateStr) {
      $scope.currDay = dateStr
      $scope.searchByDate(dateStr)
    }
  })
  fp.open()
  $scope.fpCache.push(fp)
} else {
  $scope.fpCache[0].open()
}
// $('#date-input').flatpickr({})
// flatpickr(document.getElementById('date-input'), {
//   locale: zh.zh,
//   onChange: function(selectedDates, dateStr) {
//     $scope.currDay = dateStr
//     $scope.searchByDate(dateStr)
//   }
// })
}

我创建了一个缓存数组来创建单个实例，效果很好。

【讨论】：