title: Vue.js and jQuery datepicker/timepicker two-way binding
body: <p><a href="https://v2.vuejs.org/v2/guide/#app-5" rel="nofollow noreferrer">Two-way binding with Vue.js</a> using an <code>&lt;input&gt;</code> element doesn't work when jQuery <a href="https://jqueryui.com/datepicker/" rel="nofollow noreferrer">datepicker</a> and/or <a href="http://jonthornton.github.io/jquery-timepicker/" rel="nofollow noreferrer">timepicker</a> updates the <code>&lt;input&gt;</code> value. The binding only happens when a user types inside the <code>&lt;input&gt;</code>.</p>
  <p><strong>I need the two-way binding to happen when the <code>&lt;input&gt;</code> is updated via datepicker or timepicker.</strong></p>
  <p>I am using Vue.js and jQuery in the most simple way -- importing them from within my html file via <code>&lt;script src=&quot;&quot;&gt;&lt;/script&gt;</code> tags.</p>
  <p>This issue <a href="https://forum.vuejs.org/t/making-jquery-ui-datepicker-works-with-vuejs/2752" rel="nofollow noreferrer">is known and has solutions</a>, but for more complex situations than mine. I'm having trouble figuring out how to adapt the solutions I've found to my basic use case (i.e., I'm not using custom directives, components, or event templates).</p>
  <p>Here is a <a href="http://codepen.io/bzelip/pen/XNoyZr" rel="nofollow noreferrer">codepen of my working code</a>.</p>
  <p>And here are the main parts of my static code:</p>
  <pre><code>&lt;form&gt;
    &lt;input v-model=&quot;title&quot; name=&quot;title&quot; type=&quot;text&quot;&gt;
    &lt;input v-model=&quot;shortDesc&quot; name=&quot;shortDesc&quot; type=&quot;text&quot;&gt;
    &lt;input v-model=&quot;date&quot; name=&quot;date&quot; type=&quot;text&quot;&gt;
    &lt;input v-model=&quot;time&quot; name=&quot;time&quot; type=&quot;text&quot;&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
    var elm = new Vue({
      el: '#preview',
      data: {
        title: '',
        shortDesc: '',
        date: '',
        time: ''
      }
    })
  
    $(function(){
      $(&quot;input[name=date]&quot; ).datepicker({
        dateFormat: 'DD, MM dd'
      });
    });
  
  
    $('input[name=time]').timepicker({'scrollDefault': 'now'});
  &lt;/script&gt;
  </code></pre>