0

我正在尝试将flatpickr包装到一个自定义 Vue 组件中，然后该组件应该将日期发送到 eventHub，但是我似乎无法让它工作。不知何故flatpickr找不到输入字段（我认为）

我的包装器组件看起来像这样：

<template>
<input type="text" id="flatpickr" placeholder="Select a range" />
</template>

<script>
const Flatpickr = require("flatpickr");

var defaultStart = new Date(new Date().setDate(new Date().getDate() - 10)).toISOString().slice(0, 10)
var defaultEnd = new Date().toISOString().slice(0, 10)

export default {
  name: 'DatePicker',
  props:['startDate', 'endDate'], // I don't really need this but I should pass data to all Children
  mounted() {
    new Flatpickr('#flatpickr', {
      dateFormat: "Y-m-d",
      mode: 'range',
      altInput: true, // Human Readable
      minDate: new Date().fp_incr(-60), // 60 days from today
      maxDate: defaultEnd,
      // defaultDate: [defaultStart, defaultEnd],
      // minDate: '2017-01-01', // 60 days from today
      // maxDate: '2017-05-05',
      // defaultDate: ["2017-02-02", "2017-04-04"],
      locale: { firstDayOfWeek: 1},
      onClose: function(selectedDates, dateStr, instance) {
        let startDate = selectedDates[0].toISOString().slice(0, 10);
        let endDate = selectedDates[1].toISOString().slice(0, 10);
        this.$emit('change', { startDate, endDate });  // emit to eventHub
      }
    })
  }
}
</script>

我也尝试过使用.class-name但没有。我究竟做错了什么？

4

2 回答 2

1

尝试进行以下更改：

在模板中...

<input type="text" ref="flatpickr" placeholder="Select a range" />

在mounted() 钩子中...

mounted() {
    var myInput = this.$refs.flatpickr
    new Flatpickr(myInput, {
解释：

Vue 识别模板中元素的方法是使用“ref”（而不是“id”）——最好让 Vue 满意，因为它对模板做了一些时髦的事情，如果你把它当作纯 HTML 可能会导致意外行为. （它只是看起来像 HTML，但不要被愚弄...... Vue 模板不是 HTML，实际上最终被编译成一个函数。）

因此，将输入的 id 替换为“ref”，并在您的 mounted() 挂钩中，获取对输入的变量引用，并将其用作 Flatpickr() 调用的第一个参数，而不是“#id”。

JSFiddle：https ://jsfiddle.net/CookieJon/7stotLrz/2/

于 2017-05-31T00:00:39.853 回答
0

请改用这个 vue 组件。

安装：

npm install vue-flatpickr-component --save

使用起来非常简单。

样本：

<template>
  <div>
    <flat-pickr v-model="date"></flat-pickr>
  </div>
</template>

<script>
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';

  export default {    
    data () {
      return {
        date: null,       
      }
    },
    components: {
      flatPickr
    }
  }
</script>
于 2017-07-13T10:35:45.443 回答