A simple datepicker in VueJS

Question

I want to make a datetimepicker in a components input tag. I have implemented bootstrap-datetimpicker but when i choose date i cant get input value in the components methods( here is an example: https://jsfiddle.net/ma9sgnd8/1/

new Vue({
    el: '#app',
  data: {
    date: ''
  },
  mounted: function() {

       var args = {

            format: 'MM/DD/YYYY'
       };
        this.$nextTick(function() {
            $('.datepicker').datetimepicker(args)
        });

       this.$nextTick(function() {
          $('.time-picker').datetimepicker({
            format: 'LT'
          })
       });
    }
})

Answer 1

Turns out vue listens to the input event of the dom node rather than monitoring the value of the js object (which is reasonable, because there won't be any js object until we document.querySelector() or so). Proof: in the doc , it says we can use a .lazy modifier to listen to change events instead of input . So when the jQuery-based bootstrap plugin changes the input's value in js, vue won't detect it.

Luckily, the plugin provides a change event , so we can manually set the view-model's property when the change event fires: https://jsfiddle.net/ma9sgnd8/4/

Answer 2

The problem is in your datepicker, if you look in console, it crashes and prob. does not update the state correctly, try the default one:

<div id="app">
  <div>
  <input type="date" v-model="date">
  </div>
  {{date}}
</div>

(or external package like https://github.com/charliekassel/vuejs-datepicker )