Vue.js和jQuery datepicker/timepicker双向绑定

Question

两路与Vue.js结合使用的<input>元素时的jQuery不起作用日期选择器和/或timepicker更新<input>值.绑定仅在用户在内部键入时发生<input>.

当<input>通过datepicker或timepicker更新时,我需要双向绑定.

我以最简单的方式使用Vue.js和jQuery - 通过<script src=""></script>标签从我的html文件中导入它们.

这个问题是已知的并且有解决方案,但对于比我更复杂的情况.我无法弄清楚如何使我找到的解决方案适应我的基本用例(即,我没有使用自定义指令,组件或事件模板).

这是我工作代码的代码.

以下是我的静态代码的主要部分:

<form>
  <input v-model="title" name="title" type="text">
  <input v-model="shortDesc" name="shortDesc" type="text">
  <input v-model="date" name="date" type="text">
  <input v-model="time" name="time" type="text">
</form>

<script>
  var elm = new Vue({
    el: '#preview',
    data: {
      title: '',
      shortDesc: '',
      date: '',
      time: ''
    }
  })

  $(function(){
    $("input[name=date]" ).datepicker({
      dateFormat: 'DD, MM dd'
    });
  });


  $('input[name=time]').timepicker({'scrollDefault': 'now'});
</script>

Answer 1

我无法找到纯粹的vue方法,但你可以通过使用datapicker的onSelect回调来实现这一点,你可以在这个回调中设置date变量的值.

在这里查看工作代码.

我在你的vue实例中添加了一个挂载的块:

var elm = new Vue({
  ...
  ...
  mounted () {
    var vm = this
    $('#datedate').datepicker({
      onSelect: function(dateText) { 
        vm.date = dateText
      }
   })
})

并在日期输入的id属性中添加:

<input v-model="date" name="date" class="block col-12 mb1 field" type="text"  id="datedate">

编辑

由于timepicker不具有onSelect选择该日期选择器确实,一个解决方案是使用的changeTime事件,其被示出在动作在"事件实施例"在timepicker演示文档.

下面的代码提供了更新的Vue脚本以及jQuery datepicker和timepicker的解决方案:

var elm = new Vue({
  ...
  ...
  mounted() {
    var vm = this
    $('input[name=date]').datepicker({
      dateFormat: 'DD, MM dd',
      onSelect: function(dateText) {
        vm.date = dateText
      }
    }),
    $('input[name=time]').timepicker({'scrollDefault': 'now'}).on('changeTime', function() {
      vm.time = $('input[name=time]').val();
    })
  }
})

这里有一个新的codepen验证了@ saurabh的datepicker解决方案和@BrianZ的timepicker解决方案.