feat(QDate): New prop -> no-unset (Boolean) quasarframework#7682

Author: rstoenescu

ui/dev/src/pages/form/date-part2-multiple-range.vue

@@ -3,21 +3,22 @@
     <div class="row q-gutter-md q-pb-md">
       <q-btn label="Null model" @click="nullify" />
       <q-btn label="Reset" @click="reset" />
+      <q-toggle v-model="noUnset" label="No unset" />
     </div>
 
     <div class="q-gutter-md">
       <div>Single {{ day || 'none ' }}:</div>
-      <q-date v-model="day" today-btn @input="onInput" />
+      <q-date v-model="day" today-btn @input="onInput" :no-unset="noUnset" />
 
       <div>Multiple {{ days || 'none ' }}:</div>
-      <q-date v-model="days" multiple today-btn @input="onInput" />
+      <q-date v-model="days" multiple today-btn @input="onInput" :no-unset="noUnset" />
 
       <div>Range {{ dayRange || 'none ' }}:</div>
-      <q-date v-model="dayRange" today-btn range @input="onInput" @range-start="onRangeStart" @range-end="onRangeEnd" />
+      <q-date v-model="dayRange" today-btn range @input="onInput" @range-start="onRangeStart" @range-end="onRangeEnd" :no-unset="noUnset" />
 
       <div>Multiple + Range {{ daysRange || 'none ' }}:</div>
       <div class="row no-wrap">
-        <q-date ref="daysRange" v-model="daysRange" multiple today-btn range @input="onInput" @range-start="onRangeStart" @range-end="onRangeEnd" />
+        <q-date ref="daysRange" v-model="daysRange" multiple today-btn range @input="onInput" @range-start="onRangeStart" @range-end="onRangeEnd" :no-unset="noUnset" />
         <div class="q-gutter-sm q-ml-sm">
           <q-btn label="setEditingRange(from)" @click="setRangeFrom" no-caps />
           <q-btn label="setEditingRange(from, to)" @click="setRangeFromTo" no-caps />
@@ -34,6 +35,8 @@
 export default {
   data () {
     return {
+      noUnset: false,
+
       day: null,
       days: null,
       dayRange: null,

ui/src/components/date/QDate.js

@@ -58,6 +58,8 @@ export default Vue.extend({
       validator: yearMonthValidator
     },
 
+    noUnset: Boolean,
+
     firstDayOfWeek: [ String, Number ],
     todayBtn: Boolean,
     minimal: Boolean,
@@ -1382,6 +1384,10 @@ export default Vue.extend({
     },
 
     __removeFromModel (date) {
+      if (this.noUnset === true) {
+        return
+      }
+
       let model = null
 
       if (this.multiple === true && Array.isArray(this.value) === true) {

ui/src/components/date/QDate.json

@@ -112,6 +112,13 @@
       "addedIn": "v1.13.0"
     },
 
+    "no-unset": {
+      "type": "Boolean",
+      "desc": "Remove ability to unselect a date; It does not apply to selecting a range over already selected dates",
+      "category": "selection",
+      "addedIn": "v1.13.2"
+    },
+
     "first-day-of-week": {
       "type": [ "String", "Number" ],
       "desc": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar",