v-calendar datepicker stop date from being deselected-CodePudding

Once a date has been selected, is there a way to stop the date being deselected if the same date is clicked again? I thought by setting the date in the day clicked event it would stop the deselection, but it doesn't - is there a way to do so?

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/[email protected]/lib/v-calendar.min.css';

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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  @click="togglePopover">
          <span >Date</span>
          <span >{{ inputValue }}</span>
        </label>
      </template>
  </v-date-picker>
</div>

CodePudding user response：

Turns out there is an :is-required attribute you can set to true if you don't want the date to be cleared:

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/[email protected]/lib/v-calendar.min.css';

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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  @click="togglePopover">
          <span >Date</span>
          <span >{{ inputValue }}</span>
        </label>
      </template>
  </v-date-picker>
</div>