How to create two datepicker using vuejs and momentjs? - vue.js

Question

I'm using moment js to change the format of my date. I'm trying to create a start and end date to view all the transaction of the customer. I already create the first date. And I want to create another one for my end date. How can I do that? Can somebody help me with my problem? Here's my jsfiddle: https://jsfiddle.net/89vwy2od/1/
var vm = new Vue({
el: '#app',
data: {
date : "",
date2 : ""
},
methods : {
showDate1 : function() {
alert(this.date);
},
showDate2 : function() {
alert(this.date2);
}
},
mounted: function() {
var args = {
format: 'MM-DD-YYYY'
};
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
});
this.$nextTick(function() {
$('.time-picker').datetimepicker({
format: 'LT'
})
});
}
})
$('.datepicker').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
}
});

Answer 1

One possible solution (not optimal) is using 2 different class or different id
<div class="col-md-2">
<input type="text" v-model="date" class="datepicker form-control form-control-sm" placeholder="Enter Date 1">{{date}}
<input type="text" v-model="date2" class="datepicker2 form-control form-control-sm" placeholder="Enter Date 1">{{date2}}
</div>
then you need to init 2 twices:
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
$('.datepicker2').datetimepicker(args)
});
and
$('.datepicker').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
}
});
$('.datepicker2').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date2', date);
}
});
You can check demo here
A better solution is creating a custom component.