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'
          })
       });
    }
})

tony19 · Accepted Answer · 2022-07-15 21:03:02Z

5

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/

edited Jul 15, 2022 at 21:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 23, 2016 at 12:26

JJPandari

3,5221 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

euvl · Accepted Answer · 2016-11-22 17:06:21Z

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)

answered Nov 22, 2016 at 17:06

euvl

4,7862 gold badges29 silver badges31 bronze badges

Collectives™ on Stack Overflow

A simple datepicker in VueJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related