Vue.js and jQuery datepicker/timepicker two-way binding

I am not able to find a pure vue way to do it, but you can do this by using onSelect callback of datapicker, you can set value of date variable in this callback.

See working codepen here.

I have added an mounted block in your vue instance:

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

and added in id attribute in your date input:

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

EDIT

Since timepicker doesn't have the onSelect option that datepicker does, a solution is to use the changeTime event which is shown in action in the "Event Example" in the timepicker demo docs.

The code below provides the updated Vue script with solutions for both jQuery datepicker and 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();    })  }})

And here is a new codepen verifying both @saurabh's datepicker solution and @BrianZ's timepicker solution.

This approach allows vue to pick up on the change rather than manually setting the value on vm in the select callback as in other answers.

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