1

Im really trying to understand how I can bind the values to my vue model when it gets changed by the datepicker in jquery. I have a code pen showing what im talking about here: https://codepen.io/squidwurrd/pen/mpOKya

<div id="app">
<input id="datepicker" v-model="date">
</div>

The value changes obviously but the model is not updated. Im fairly new to vue and dont really understand how to get it to work with other libraries. Please help.

Thank you

user3756741
  • 99
  • 1
  • 2
  • 10

1 Answers1

11

You can use mounted life-cycle hook for creating your datepicker and bind date-picker onSelect event to update current model.

mounted : we need to use this because date-picker is inside Vue and we need to initialize it when Vue is ready so we can bind events.

you can see working example below.

new Vue({
  el: '#app',
  data: {
    date: '',    
  },
  mounted: function() {
      var self = this;
      $('#datepicker').datepicker({
        onSelect:function(selectedDate, datePicker) {            
            self.date = selectedDate;
        }
      });
  },
  methods:{
     
  }
})
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" />

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>.half{width:50%;float:left;}</style>
</head>
<body>
  <div id="app">            
      <input id="datepicker" v-model="date">
      date: {{ date }}
   </div>
  </body>
</html>
Hardik Satasiya
  • 9,547
  • 3
  • 22
  • 40
  • You should use this._uid for the datepicker id to allow multiple Vue Components. – Sebi2020 Sep 11 '20 at 20:10
  • I am really sorry but here point is not making good component or bad component, I am just answering your question about how it works. If user asked i need to make multiple component then answer would be different its simple as is. – Hardik Satasiya Sep 13 '20 at 19:39
  • By the way @Sebi2020 , I am well aware with component style and which are good and which are not, but for this question this answer is sufficient and good enough. – Hardik Satasiya Sep 13 '20 at 19:48