Added feature to have a quick date(s) that input the defined date or a …

packages/docs/page-config/navigationRoutes.ts

@@ -288,7 +288,7 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "date-input",
         displayName: "Date Input",
         meta: {
-          badge : navigationBadge.updated('1.8.0'),
+          badge : navigationBadge.updated('1.9.11'),
         }
       },
       {

packages/docs/page-config/ui-elements/date-input/api-description.ts

@@ -62,7 +62,8 @@ export default defineApiDescription({
     offset: "Dropdown content will be moved by main and cross axis according to current `placement`",
     placement: "Sets the placement of the dropdown content. [More about placements](/ui-elements/dropdown#placement-and-offset)",
     rangeDelimiter: "The delimiter used when turning model value to string",
-    trigger: "Action that will triggered when open and close dropdown."
+    trigger: "Action that will triggered when open and close dropdown.",
+    quickDate: 'When supplied will automatically input the defined dates for desired keys. The default key detected is `t`. The property value must be either `[{ date: new Date() }] , [{ date: \'01/01/2024\' key: \'s\' }] or just exist with no value. When supplying a custom values, you must supply a `date` but `key` is optional.',
   },
   events: {
     clear: "Emitted if select value has been cleared",

packages/ui/src/components/va-date-input/VaDateInput.demo.vue

@@ -202,6 +202,18 @@
       <va-date-input v-model="range" close-on-change label="Range" />
       <va-date-input v-model="value" manual-input close-on-change label="Manual input" />
     </VbCard>
+
+    <VbCard title="Quick date using default date and key">
+  <va-date-input v-model="quickDateDefault" manual-input label="Start date on 't' press (Enters todays date)" quick-dates />
+  </VbCard>
+
+  <VbCard title="Start date on 's' press">
+  <va-date-input v-model="quickDate" manual-input label="Start date on 's' press (Enters todays date) or 'e' (Enters 01/01/2000)" :quick-dates="[{ date: new Date(), key: 's' }, {date: '01/01/2000', key: 'e'}]" />
+  </VbCard>
+
+  <VbCard title="Start date on 't' press with string date for property">
+  <va-date-input v-model="strQuickDate" manual-input label="Start date on 't' press (Enters 01/01/2022)"  :quick-dates="[{ date: '01/01/2022' }]" />
+  </VbCard>
   </VbDemo>
 </template>
 
@@ -226,6 +238,9 @@ export default {
   data () {
     return {
       value: getStaticDate(),
+      quickDateDefault: undefined as any,
+      quickDate: undefined as any,
+      strQuickDate: undefined as any,
       range: { start: getStaticDate(), end: nextWeek },
       dates: [getStaticDate(), nextWeek],
       dayView: { type: 'day', month: 3, year: 2013 } as DatePickerView,

packages/ui/src/components/va-date-input/VaDateInput.vue

@@ -17,6 +17,7 @@
           v-on="inputListeners"
           :model-value="valueText"
           @change="onInputTextChanged"
+          @keydown="onKeyDown"
         >
           <template
             v-for="name in filterSlots"
@@ -83,7 +84,7 @@
 import { computed, PropType, toRef, toRefs, watch, ref, shallowRef, nextTick, Ref, useAttrs, useSlots } from 'vue'
 import omit from 'lodash/omit'
 
-import { filterComponentProps, extractComponentProps, extractComponentEmits } from '../../utils/component-options'
+import { filterComponentProps, extractComponentProps, extractComponentEmits, DateRequest } from '../../utils/component-options'
 import {
   useComponentPresetProp,
   useClearable, useClearableEmits, useClearableProps,
@@ -151,6 +152,8 @@ const props = defineProps({
   ariaToggleDropdownLabel: useTranslationProp('$t:toggleDropdown'),
   ariaResetLabel: useTranslationProp('$t:resetDate'),
   ariaSelectedDateLabel: useTranslationProp('$t:selectedDate'),
+
+  quickDates: { type: Array as PropType<Array<DateRequest>| boolean>, default: () => {}, required: false },
 })
 
 const emit = defineEmits([
@@ -270,6 +273,33 @@ const onInputTextChanged = ({ target }: Event) => {
   }
 }
 
+const onKeyDown = (event: KeyboardEvent) => {
+  const keyboardKey = event.key.toLocaleLowerCase()
+  const isAlpha = !!keyboardKey.match(/^[A-Za-z]$|^$/)
+
+  if (isAlpha) {
+    event.preventDefault()
+
+    const defaultKey = 't'
+    const today = new Date().toString()
+
+    let shouldInput = false
+    let keyProps
+    if (Array.isArray(props.quickDates)) {
+      keyProps = props.quickDates.length === 1 && !props.quickDates[0]?.key ? props.quickDates[0] : props.quickDates.find(d => d.key?.toLowerCase() === keyboardKey.toLowerCase())
+      if (keyProps) { shouldInput = true }
+    } else if (keyboardKey === defaultKey) { shouldInput = true }
+
+    if (shouldInput) {
+      if (keyboardKey === defaultKey && !keyProps) {
+        valueComputed.value = parseDateInputValue(today)
+      } else if (keyProps) {
+        valueComputed.value = typeof (keyProps.date) === 'string' ? parseDateInputValue(keyProps.date as string) : parseDateInputValue(keyProps.date.toString())
+      }
+    }
+  }
+}
+
 const reset = () => withoutValidation(() => {
   statefulValue.value = props.clearValue
   emit('clear')

packages/ui/src/utils/component-options/types.ts

@@ -45,3 +45,5 @@ export type ExtractComponentProps<T> = true extends boolean ? ExtractDefineCompo
 export type ExtractComponentEmits<T> = ComponentEmit<T>
 
 export type ExtractComponentPropTypes<T extends DefineComponentOptions> = ComponentProps<T>
+
+export type DateRequest = {date: Date | string, key?: string}