CODEWITHSUNDEEP
jquerydatepickervue.js
user3756741
user3756741

Reputation: 109

Datepicker with Vuejs

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

Upvotes: 1

Views: 14719

Answers (1)

Hardik Satasiya
Hardik Satasiya

Reputation: 9715

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>

Upvotes: 12

Related Questions