Создать Vuejs компонент из bootstrap -Datepicker

Question

Я очень старался создать Vuejs компонент из bootstrap -datepicker , но не смог.

Мой проект отложен из-за этого компонента. Я хочу, чтобы этот компонент принимал значение (v-модель) следующим образом:

<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

Я использовал часы er в своем простом фрагменте (измененное изменение данных с некоторыми строками даты в функции 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>