我必须输入start_date
和end_date
。对于start_date,它可以等于当前日期,但不能超过当前日期。对于end_date,其最大值应大于至start_date。例如,如果用户选择2019-09-12
作为开始日期,则结束日期最等于或大于2019-09-12
。如果用户输入无效,我想显示一个警报。如何在jquery和VueJS中做到这一点?这是我的以下代码。
<div class="input-group date">
<input type="text" v-model="start_date" class="datepicker form-control form-control-sm" placeholder="From">
<input type="text" v-model="end_date" class="datepicker2 form-control form-control-sm ml-2" placeholder="To">
<button @click="searchDistributedReports" class="btn btn-sm bg-primary text-light ml-2">Search</button>
</div>
mounted: function() {
var args = {
format: 'YYYY-MM-DD'
};
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
$('.datepicker2').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, 'start_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, 'end_date', date);
}
});