Question

我正在尝试设置日期范围，以允许用户使用vue-datepicker选择日期，因为桌面野生动物园用户在使用输入类型date时遇到问题。查阅vue-datepicker的文档并查看其演示，我真的很困惑。我该在哪里应用禁用数据来限制datepicker下拉菜单中的日期范围？

我试图将：disabled =“ disabled”放在datepicker中，但是文档说它期望布尔响应。任何帮助将不胜感激！

<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

中提到的范围

template :::

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

script ::::

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>

然后您可以在disabled部分中设置data约定，您显然已经在问题的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>

vue-datepicker在之前和之后禁用

4 个答案: