从 bootstrap-datepicker 创建 Vuejs 组件

Question

我非常努力地从 bootstrap-datepicker 创建 Vuejs 组件，但我做不到。

我的项目因为这个组件而被推迟。我希望这个组件接受这样的值（v-model）：

<date-picker v-model="date"></date-picker>

这是bootstrap-datepicker的网站：

https://bootstrap-datepicker.readthedocs.io/en/latest/

我知道网络上有很多 Vuejs 日期选择器，但我只需要这个。

这就是我所做的：

<template>
    <input type="text" :value="value" class="form-control" placeholder="Enter the date" required>
</template>

<script>
    export default {
        props: ['value'],
        mounted() {
            $(this.$el).datepicker().on('show', this.setDate);
        },
        methods:{
        setDate(e){
            $(this.$el).datepicker('setDate', e.target.value);
        }
     }
    }
</script>

非常感谢您的帮助

Answer 1

我在简单的 sn-p 中使用了 watcher（在 data 函数中使用一些日期字符串模拟数据更改）：

window.$ = jQuery
window.$jQuery = jQuery

const DatePicker = {
  props: ['datevalue'],
  template: `<input v-model="datevalue" class="datepicker" data-date-format="mm/dd/yyyy">`,
  watch: {
    datevalue: function(value) {
      // use update or setDate methods
      jQuery('.datepicker').datepicker('update', value);
      // jQuery('.datepicker').datepicker('setDate', value);
      jQuery('.datepicker').datepicker('show');
    }
  }
}
const App = new Vue({
  components: {
    DatePicker
  },
  computed: {
    compDate() {
      var options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      };
      return new Date(this.date).toLocaleDateString('en-US', options)
    }
  },
  data() {
    return {
      date: "03/04/2011",
      dateIndex: 0,
      someDates: [
        "03/05/2011",
        "03/06/2011",
        "03/07/2011"
      ]
    }
  },
  methods: {
    nextDay() {
      this.date = this.someDates[this.dateIndex]
      this.dateIndex > 1 ? this.dateIndex = 0 : this.dateIndex++
    }
  }
})

jQuery(document).ready(function($) {
  App.$mount('#app')
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="nextDay">NEXT DAY</button>
  <date-picker :datevalue="compDate"></date-picker>
</div>