Merge pull request #773 from nathanreyes/bug/range-input-switching

Fix range input switching and page adjustments when date range is null

docs/.vuepress/components/github/769.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-date-picker v-model="range" is-range>
+    <template v-slot="{ inputValue, inputEvents }">
+      <div class="flex">
+        <input
+          :class="inputClass"
+          :value="inputValue.start"
+          v-on="inputEvents.start"
+        />
+        <span class="mx-2 text-lg">&rarr;</span>
+        <input
+          :class="inputClass"
+          :value="inputValue.end"
+          v-on="inputEvents.end"
+        />
+      </div>
+    </template>
+  </v-date-picker>
+</template>
+
+<script>
+export default {
+  githubTitle:
+    'Range datepicker with double inputs disallows typing dates manually',
+  data() {
+    return {
+      range: null,
+      inputClass: 'px-2 py-1 border rounded',
+    };
+  },
+};
+</script>

docs/changelog/v2.0.md

@@ -451,4 +451,5 @@ Fixes single use of `highlight.contentStyle` or `highlight.contentClass`
 
 ### Bug Fixes
 
-* Fix `on-bottom` class when `trim-weeks` prop is used
+* Fix `on-bottom` class when `trim-weeks` prop is used
+* Fix date range clearing and page adjustment when end date is missing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "author": "Nathan Reyes <[email protected]>",

src/components/DatePicker.vue

@@ -483,7 +483,10 @@ export default {
         let inputValue = e.target.value;
         this.inputValues.splice(isStart ? 0 : 1, 1, inputValue);
         if (this.isRange) {
-          inputValue = { start: this.inputValues[0], end: this.inputValues[1] };
+          inputValue = {
+            start: this.inputValues[0],
+            end: this.inputValues[1] || this.inputValues[0],
+          };
         }
         this.updateValue(inputValue, {
           config,
@@ -501,7 +504,10 @@ export default {
         const inputValue = e.target.value;
         this.inputValues.splice(isStart ? 0 : 1, 1, inputValue);
         const value = this.isRange
-          ? { start: this.inputValues[0], end: this.inputValues[1] }
+          ? {
+              start: this.inputValues[0],
+              end: this.inputValues[1] || this.inputValues[0],
+            }
           : inputValue;
         this.updateValue(value, {
           config,
@@ -570,10 +576,7 @@ export default {
       }
 
       // 2. Validation (date or range)
-      const isDisabled =
-        this.hasValue(normalizedValue) &&
-        this.disabledAttribute &&
-        this.disabledAttribute.intersectsDate(normalizedValue);
+      const isDisabled = this.valueIsDisabled(normalizedValue);
       if (isDisabled) {
         if (isDragging) return;
         normalizedValue = this.value_;
@@ -696,6 +699,13 @@ export default {
       }
       return datesAreEqual(a, b);
     },
+    valueIsDisabled(value) {
+      return (
+        this.hasValue(value) &&
+        this.disabledAttribute &&
+        this.disabledAttribute.intersectsDate(value)
+      );
+    },
     formatInput() {
       this.$nextTick(() => {
         const opts = {