Question

我正在使用moment js更改日期格式。我正在尝试创建开始日期和结束日期以查看客户的所有交易。我已经创建了第一次约会。我想为结束日期创建另一个。我怎样才能做到这一点？有人可以帮我解决我的问题吗？这是我的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

一种可能的解决方案（并非最佳）是使用2个不同的类或不同的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>

然后您需要两次初始化两次：

this.$nextTick(function() {
            $('.datepicker').datetimepicker(args)
            $('.datepicker2').datetimepicker(args)
        });

和

$('.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);
  }
});

您可以选中demo here

更好的解决方案是创建自定义组件。

如何使用vuejs和momentjs创建两个datepicker？

1 个答案: