Vuejs2 VueJS日期范围

我必须选择两个日期来设置输入日期范围。我使用了库而不是日期范围输入，对每个日期（开始日期和结束日期）使用了单个日期选择器，因为要求一次只显示一个日历。我在我的项目中使用了vuejs。因此，我必须将这些输入值绑定到模型。我是vuejs新手，所以对vuejs不太了解。但我知道我必须使用自定义vuejs指令将这些值绑定到模型。以下是日期范围输入的要求

• 一次一个日期选择器

---

• 动态最小最大日期来完成一些验证，如

  start我得到了解决方案。我必须使用组件。我在某个地方读到，您无法在VueJS2中获取自定义指令的实例。我不知道这是否正确。但我从中得到了解决办法
  
  HTML
  
  <div id="app">
      <div class="dropdown-menu">
          <div class="input-group date">
              <label>from:</label>
              <input size="16" type="text" v-date v-model="queries.start_date" class="form_datetime" readonly="">
              <span class="input-group-addon">
                  <span class="calendar-icon"></span>
              </span>
          </div>
          <div class="input-group date form_datetime">
              <label>to:</label>
              <input size="16" type="text" v-date v-model="queries.end_date" class="form_datetime" readonly>
              <span class="input-group-addon">
                  <span class="calendar-icon"></span>
              </span>
          </div>
      </div>
  </div>
  
  <div class="dropdown-menu" id="app">
      <div class="input-group date">
          <label>from:</label>
          <datepicker v-model="queries.start_date" :enddate="queries.end_date"></datepicker>
          <span class="input-group-addon">
              <span class="calendar-icon"></span>
          </span>
      </div>
      <div class="input-group date form_datetime">
          <label>to:</label>
          <datepicker v-model="queries.end_date" :startdate="queries.start_date"></datepicker>
          <span class="input-group-addon">
              <span class="calendar-icon"></span>
          </span>
      </div>
  </div>
  
  <script type="text/x-template" id="datepicker-template">
      <input size="16" type="text" class="form_datetime" readonly="">
  </script>
  
  我也有同样的问题，我花了一整天的时间才真正完成。。。和你的目标非常相似
  
  这是我想到的。
  WebPackageBin链接似乎已断开：
  未找到模块：错误：无法解析“/app/f82abd6c-ee1c-4b64-93ef-45368cf44fc5”中的“手写笔”
  <div class="dropdown-menu" id="app">
      <div class="input-group date">
          <label>from:</label>
          <datepicker v-model="queries.start_date" :enddate="queries.end_date"></datepicker>
          <span class="input-group-addon">
              <span class="calendar-icon"></span>
          </span>
      </div>
      <div class="input-group date form_datetime">
          <label>to:</label>
          <datepicker v-model="queries.end_date" :startdate="queries.start_date"></datepicker>
          <span class="input-group-addon">
              <span class="calendar-icon"></span>
          </span>
      </div>
  </div>
  
  <script type="text/x-template" id="datepicker-template">
      <input size="16" type="text" class="form_datetime" readonly="">
  </script>
  
  Vue.component('datepicker', {
      props: ['value', 'startdate', 'enddate'],
      template: '#datepicker-template',
      mounted: function () {
          var vm = this;
          $(this.$el)
                  .val(this.value)
                  .datetimepicker({
                      format: "mm/dd/yyyy",
                      autoclose: true,
                      minView: 2,
                      daysShort: true,
                      startDate: this.startdate,
                      endDate: this.enddate
                  })
                  .on('change', function () {
                      vm.$emit('input', this.value);
                  });
      },
      watch: {
          value: function (value) {
              $(this.$el).val(value);
          },
          startdate: function (value) {
              $(this.$el).datetimepicker('setStartDate', value);
          },
          enddate: function (value) {
              $(this.$el).datetimepicker('setEndDate', value);
          }
      }
  });
  
  var vm = new Vue({
      el: '#app',
      data: {
          queries: {
              start_date: "",
              end_date: "",
          }
      },
  });