v-calendar datepicker 停止日期被取消选择

Question

一旦选择了一个日期，如果再次点击相同的日期，是否有办法停止取消选择该日期？我想通过在点击事件中设置日期来停止取消选择，但它没有 - 有没有办法做到这一点？

new Vue({
  el: "#app",
  data() {
    return {
      date: new Date(),
      masks: {
        input: 'DD/MM/YYYY',
      },
    };
  },
  methods: {
    dayClicked(day) {
      this.date = new Date(day.id);
    },
  },
});

@import url 'https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.min.css';

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.umd.min.js"></script>
<div id='app'>
  <v-date-picker v-model="date" color="orange" :masks="masks" :disabled-dates="{ weekdays: [1, 7] }" @dayclick="dayClicked">
    <template #default="{ inputValue, togglePopover }">
        <label class="form__label date-selector__label" @click="togglePopover">
          <span class="form__label-text date-selector__label-text">Date</span>
          <span class="date-selector__label-value">{{ inputValue }}</span>
        </label>
      </template>
  </v-date-picker>
</div>

Answer 1

事实证明，如果您不想清除日期，可以将 :is-required 属性设置为 true：

new Vue({
  el: "#app",
  data() {
    return {
      date: new Date(),
      masks: {
        input: 'DD/MM/YYYY',
      },
    };
  },
  methods: {
    dayClicked(day) {
      this.date = new Date(day.id);
    },
  },
});

@import url 'https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.min.css';

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.umd.min.js"></script>
<div id='app'>
  <v-date-picker v-model="date" color="orange" :masks="masks" :disabled-dates="{ weekdays: [1, 7] }" :is-required="true" @dayclick="dayClicked">
    <template #default="{ inputValue, togglePopover }">
        <label class="form__label date-selector__label" @click="togglePopover">
          <span class="form__label-text date-selector__label-text">Date</span>
          <span class="date-selector__label-value">{{ inputValue }}</span>
        </label>
      </template>
  </v-date-picker>
</div>

v-calendar datepicker 停止日期被取消选择

v-calendar datepicker stop date from being deselected

javascript

vue.js

vuejs2