VueJs Component for DateRangePicker (bootstrap)

by oktaviardi pratama

HTML

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id=app>
  <label>{{dateRange}}</label>
  
  <br/>
  <date-range-picker id="dfdfd" v-on:dateRangeChanged="onDateRangeChanged"></date-range-picker>
</div>

JavaScript

Vue.component('date-range-picker', {
	props:['id'],
	template: '<input type="text" :id="id" :name="id" />',
	mounted: function(){
  	var self = this;
  	var input = $('input[name="'+ this.id +'"]');
  	input.daterangepicker();
    input.on('apply.daterangepicker', function(ev, picker) {
      self.$emit('daterangechanged',picker);
    });
  } 
});


var VM = new Vue({
	el: "#app",
  data: {
  	dateRange: "ciao",
    startRange: "",
    endRange: ""
  },
  methods:{
  	onDateRangeChanged: function(picker){
    	this.dateRange = picker.startDate + " - " + picker.endDate;    	
    }
  }
});