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

Posted 2023-02-22

【中文标题】Vue.js 和 jQuery datepicker/timepicker 双向绑定

【英文标题】：Vue.js and jQuery datepicker/timepicker two-way binding

【发布时间】：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>

【参考方案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 ))
  
);