如何使用vuejs在jquery中验证startDate和endDate?

时间:2019-09-27 22:12:19

标签: jquery vue.js

我必须输入start_dateend_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);
 }
});

0 个答案:

没有答案