VueJS 中的一个简单的日期选择器 [英] A simple datepicker in VueJS

问题描述

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

解决方案

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/

这篇关于VueJS 中的一个简单的日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！