[Vuejs]-Create Vuejs component from bootstrap-datepicker

by

0👍

I used a watcher in my simple snippet (mocked data-change with some date strings in the data function):

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>

Leave a comment