Change default value for 'datePickerUpdateOnInputKeyup'. Add escape key handling for 'v-date-picker'.

Author: Nathan Reyes

CHANGELOG.md

@@ -12,12 +12,13 @@
 
 ## Improvements
 ### `v-date-picker`
+* Improve input key handing, specifically for `enter` and `esc` keys
 * Added `update-on-input-keyup` prop to update picker selection on every `keyup` event.
 * Custom slot method `updateValue` can now accept options as the second parameter. Closes #118.
 
 | Property | Description | Default Value |
 | -------- | ----------- | ------------- |
-| `formatInput` | If new value is valid, date picker should reformat the `inputValue`. | `true` |
+| `formatInput` | If new value is valid, date picker should reformat the `inputValue` (based on `formats.input`). | `true` |
 | `hidePopover` | If new valud is valid, date picker should hide popover. | `!popoverKeepVisibleOnInput` |
 
 ```html

src/components/DatePicker.vue

@@ -416,13 +416,21 @@ export default {
       }
     },
     inputChange() {
+      // Enter key, blur or other change events
       this.updateValue(this.inputValue, {
         formatInput: true,
         hidePopover: false,
       });
     },
     inputKeyup(e) {
-      if (e.keyCode !== 13 && this.updateOnInputKeyup) {
+      // Escape key
+      if (e.keyCode === 27) {
+        this.updateValue(this.value, {
+          formatInput: true,
+          hidePopover: true,
+        });
+        // All other keys
+      } else if (e.keyCode !== 13 && this.updateOnInputKeyup) {
         this.updateValue(this.inputValue, {
           formatInput: false,
           hidePopover: false,
@@ -460,7 +468,7 @@ export default {
         this.$emit('input', filteredValue);
       } else {
         if (formatInput) this.formatInput();
-        if (hidePopover) this.popoverForceHidden = true;
+        if (hidePopover) this.hidePopover();
       }
     },
     formatInput() {
@@ -471,7 +479,7 @@ export default {
     hidePopover() {
       setTimeout(() => {
         this.popoverForceHidden = true;
-      }, 300);
+      }, 200);
     },
   },
 };

src/utils/defaults.js

@@ -41,7 +41,7 @@ const defaults = {
       placeholder: `${format} - ${format}`,
     }),
   }),
-  datePickerUpdateOnInputKeyup: true,
+  datePickerUpdateOnInputKeyup: false,
   datePickerTintColor: '#66B3CC',
   datePickerShowCaps: false,
   datePickerShowDayPopover: true,