Vue.js и jQuery datepicker/timepicker двусторонняя привязка

Двусторонняя привязка с Vue.js с использованием элемента <input> не работает, когда jQuery datepicker и/или timepicker обновляет значение <input>. Связывание происходит только тогда, когда пользователь вводит внутри <input>.

Мне нужно, чтобы двусторонняя привязка выполнялась, когда <input> обновляется через datepicker или timepicker.

Я использую Vue.js и jQuery самым простым способом - импортируя их из моего html файла с помощью тегов <script src=""></script>.

Этот вопрос известен и имеет решения, но для более сложных ситуаций, чем у меня. Мне трудно понять, как адаптировать решения, которые я нашел, к моему основному варианту использования (т.е. Я не использую настраиваемые директивы, компоненты или шаблоны событий).

Вот код моего рабочего кода.

И вот основные части моего статического кода:

<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 vue для этого, но вы можете сделать это, используя onSelect обратный вызов datapicker, вы можете установить значение переменной даты в этом обратном вызове.

Смотрите рабочий код здесь.

Я добавил монтированный блок в свой экземпляр 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, которую делает datepicker, решение должно использовать changeTime событие, которое показано в действии в "Event Example" в demo docstimepicker > .

В приведенном ниже коде представлены обновленные Vue script решения для 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.

Ответ 2

Этот подход позволяет vue забрать изменения, а не вручную устанавливать значение vm в vm select, как в других ответах.

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