title: vue-datepicker to disable before and from
body: <p>I am attempting to set a range of dates to allow users to pick the date using vue-datepicker, since desktop safari users have problems using input type date. Going thru the documentation of vue-datepicker and looking at the demo it has, I got really confused. Where do I apply the disable data to limit the range of dates on the datepicker dropdown?</p>
  
  <p>I have tried to put the :disabled="disabled" in datepicker, but documentation says it expects a boolean response. Any help is greatly appreciated!</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;datepicker v-model="booking_date"&gt;&lt;/datepicker&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Datepicker from 'vuejs-datepicker';
  import moment from 'moment';
  export default {
      data() {
          return {
              moment: moment,
              booking_date: null,
              disabled: {},
          }
      },
      mounted() {
          this.defaultDateRange();
      },
      methods: {
          defaultDateRange() {
              let tzoffset = new Date().getTimezoneOffset() * 60000;
              let today = (new Date(Date.now() - tzoffset)).toISOString().substr(0, 10);
              let max = new Date();
              max.setDate(max.getDate() + 30);
              let max_date = max.toISOString().substr(0, 10);
              this.disabled = {
                  to: Date.parse(today),
                  from: Date.parse(max_date)
              };
              this.booking_date = Date.parse(today);
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>new attempt:</p>
  
  <pre><code>&lt;datepicker v-model="booking_form.booking_date" :disabled-dates="disabled"&gt;&lt;/datepicker&gt;
  </code></pre>