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

【问题标题】：Vue.js and jQuery datepicker/timepicker two-way bindingVue.js 和 jQuery datepicker/timepicker 双向绑定
【发布时间】：2017-05-03 05:08:46
【问题描述】：

当 jQuery datepicker 和/或 timepicker 更新 <input> 值时，Two-way binding with Vue.js 使用 <input> 元素不起作用。仅当用户在 <input> 中键入时才会发生绑定。

当<input> 通过日期选择器或时间选择器更新时，我需要进行双向绑定。

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

这个问题is known and has solutions，但适用于比我更复杂的情况。我无法弄清楚如何使我找到的解决方案适应我的基本用例（即，我没有使用自定义指令、组件或事件模板）。

这是codepen of my working code。

这里是我的静态代码的主要部分：

<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>

【问题讨论】：

标签： jquery data-binding vue.js jquery-ui-datepicker

【解决方案1】：

我无法找到纯 vue 的方式来做到这一点，但你可以通过使用 datapicker 的 onSelect 回调来做到这一点，你可以在这个回调中设置日期变量的值。

请参阅工作代码笔 here。

我在你的 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 没有 datepicker 所具有的 onSelect option，因此解决方案是使用 changeTime event，它在 "Event Example" in the timepicker demo docs 中显示。

以下代码提供了更新后的 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();
    })
  }
})

这是new codepen verifying both @saurabh's datepicker solution and @BrianZ's timepicker solution。

【讨论】：

感谢@saurabh，您的日期选择器代码对我有用！我能够使您的代码适应类似但不同的时间选择器问题的解决方案。我将创建一个在同一个文件中显示两种解决方案的答案。
@BrianZ 太好了，您也可以编辑此答案以使其完整。
一开始直接绑定不起作用的原因是什么？

【解决方案2】：

这种方法允许 vue 接受更改，而不是像其他答案那样在 select 回调中手动设置 vm 的值。

$('#datedate').datepicker({
  onSelect: function(dateText) { 
    $(this)[0].dispatchEvent(new Event('input', { 'bubbles': true }))
  }
});

【讨论】：