vue-datepicker 在之前和之后禁用

Question

我正在尝试设置日期范围以允许用户使用 vue-datepicker 选择日期，因为桌面 safari 用户在使用输入类型日期时遇到问题。浏览 vue-datepicker 的文档并查看它的演示，我真的很困惑。我在哪里应用禁用数据来限制日期选择器下拉列表中的日期范围？

我试图将 :disabled="disabled" 放入日期选择器，但文档说它需要一个布尔响应。非常感谢任何帮助！

<template>
    <div>
        <datepicker v-model="booking_date"></datepicker>
    </div>
</template>
<script>
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);
        }
    }
}
</script>

新尝试：

<datepicker v-model="booking_form.booking_date" :disabled-dates="disabled"></datepicker>

Answer 1

在尝试了很多之后，以下代码对我有用（其中 datepicker 禁用了从现在起 1 个月之后的所有日期以及所有以前的日期）。我使用了 datepicker 文档 datepicker npm

中提到的 ranges

模板:::

<datepicker :disabledDates="disabledDates" ></datepicker>

脚本::::

import Datepicker from 'vuejs-datepicker';
export default {
    data(){
      return {
        disabledDates:{
           ranges:[]
        }
      }
  },
  mounted() {
    this.defaultDateRange();
  },
  components:{
       Datepicker
  },
  methods:{
       let tzoffset = new Date().getTimezoneOffset() * 60000;
       let today = (new Date(Date.now() - tzoffset));

       let oldToday = new Date(today.getTime()); // AS DATES ARE REFRENCE COOPIED I HAD TO COPY THE VALUE OF TODAY 
       oldToday.setDate(oldToday.getDate()-1);

       today.setMonth(today.getMonth()+1); // GETTING NEXT MONTHS DATE

       let max = new Date(); // YOU CAN REMOVE THIS MAX VARIABLE I JUST PUT IT FOR YOUR REFRENCE
       let obj = {};
       max.setDate(max.getDate() + 30);
       let max_date = max;

       obj["from"] = new Date(0,0,0); // FOR DISABLING ALL PREVIOUS DATES I PUT THIS IN RANGES ARRAY INSIDE DISABLEDDATES OBJECT
       obj["to"] = oldToday;

       this.disabledDates["ranges"].push(obj);
       this.disabledDates["from"] = today;
       console.log("disableDates is ");
       console.log(this.disabledDates);
       this.booking_date = Date.parse(today);
  }
}

Answer 2

要从可选日期中省略某些日期，您应该将disabled-dates 属性（而不是disabled）作为：

<datepicker v-model="booking_date" :disabled-dates="disabled"></datepicker>

然后您可以在您的 data 部分设置 disabled 约定，您显然已经在问题的 js 代码中这样做了。

Answer 3

该属性称为 disabledDates，您可以在npm page 中了解更多信息。

jsFiddle：https://jsfiddle.net/h3gkqc4w/

<div id="app">
  <d-p
     v-model="model.date"
     :format="DatePickerFormat"
     :disabled-dates="disabledDates">
</d-p>
</div>

new Vue({
  el: "#app",
  components:{'d-p': vuejsDatepicker},
  data: {
    model: {
          date: ''
        },
        DatePickerFormat: 'dd/MM/yyyy',
        disabledDates: {
          to: new Date(Date.now())
        }
  }
})

Answer 4

<input type="date" id="datemin" name="datemin" min="currentDateWithFormat">
<script>
      var currentDate = new Date();
      var currentDateWithFormat = new Date()
        .toJSON()
        .slice(0, 10)
        .replace(/-/g, "-");
      console.log(currentDateWithFormat);
</script>