new plugin with clear and today for flatpickr

Date.vue

<template>
  <div>
    <flat-pickr v-model="date" :config="configs.selectToday"></flat-pickr>
  </div>
</template>

<script>
import flatPickr from 'vue-flatpickr-component'
import SelectTodayPlugin from '../todayselect'
import ConfirmDatePlugin from 'flatpickr/dist/plugins/confirmDate/confirmDate'
import 'flatpickr/dist/flatpickr.css'
import 'flatpickr/dist/plugins/confirmDate/confirmDate.css'

export default {
  data () {
    return {
      data: null,
      configs: {
        selectToday: {
          enableTime: true,
          plugins: [new SelectTodayPlugin(), new ConfirmDatePlugin()]
          // plugins: [new SelectTodayPlugin()]
        }
      }
    }
  },
  components: {
    flatPickr
  }
}
</script>

<style>

.flatpickr-btn {
  height: 20px;
  flex-grow: 1;
  border: 0px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
}
</style>

todayselect.js

var defaultConfig = {
  todayText: 'today',
  clearText: 'clear',
  theme: 'light'
}

function SelectTodayPlugin (pluginConfig) {
  var config = Object.assign({}, defaultConfig, pluginConfig)
  var btnContainer
  var btnToday
  var btnClear
  return function (fp) {
    if (fp.config.noCalendar || fp.isMobile) return {}
    return Object.assign({
      onReady: function onReady () {
        // 创建元素
        btnContainer = fp._createElement('div', 'flatpickr-confirm ' + 'visible ' + config.theme + 'Theme')
        btnClear = fp._createElement('div', 'flatpickr-btn ' + config.theme + 'Theme', config.clearText)
        btnToday = fp._createElement('div', 'flatpickr-btn ' + config.theme + 'Theme', config.todayText)

        // 功能实现
        btnToday.addEventListener('click', function () {
          fp.setDate(fp.now)
        })

        btnClear.addEventListener('click', function () {
          fp.input.value = ''
          fp.close()
        })

        // add to calendarContainer
        btnContainer.appendChild(btnClear)
        btnContainer.appendChild(btnToday)
        fp.calendarContainer.appendChild(btnContainer)
      },
      onChange: function onChange (_, dateStr) {
        var showCondition = fp.config.enableTime || fp.config.mode === 'multiple'
        if (dateStr && !fp.config.inline && showCondition) {
          // 判断confirm是否存在，存在则appendchild
          var nodes = fp.calendarContainer.childNodes
          for (var i = 0; i < nodes.length ; i++) {
            if (nodes[i].className === 'flatpickr-confirm lightTheme visible') {
                var btnConfirm = nodes[i]
                btnConfirm.classList.remove('flatpickr-confirm')
                btnConfirm.classList.add('flatpickr-btn')
                btnContainer.appendChild(btnConfirm)
            }
          }
        }
      }
    })
  }
}
export default SelectTodayPlugin