diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index 9f3d3e43f4..f5e187abe9 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/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'),
}
},
{
diff --git a/packages/docs/page-config/ui-elements/date-input/api-description.ts b/packages/docs/page-config/ui-elements/date-input/api-description.ts
index 88093c4955..5856a4074a 100644
--- a/packages/docs/page-config/ui-elements/date-input/api-description.ts
+++ b/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",
diff --git a/packages/ui/src/components/va-date-input/VaDateInput.demo.vue b/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
index 553a9dccd7..f58e985550 100644
--- a/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
+++ b/packages/ui/src/components/va-date-input/VaDateInput.demo.vue
@@ -202,6 +202,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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,
diff --git a/packages/ui/src/components/va-date-input/VaDateInput.vue b/packages/ui/src/components/va-date-input/VaDateInput.vue
index 060c32647f..80646039f2 100644
--- a/packages/ui/src/components/va-date-input/VaDateInput.vue
+++ b/packages/ui/src/components/va-date-input/VaDateInput.vue
@@ -17,6 +17,7 @@
v-on="inputListeners"
:model-value="valueText"
@change="onInputTextChanged"
+ @keydown="onKeyDown"
>
| 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')
diff --git a/packages/ui/src/utils/component-options/types.ts b/packages/ui/src/utils/component-options/types.ts
index e7040eb95b..c1e9e14da1 100644
--- a/packages/ui/src/utils/component-options/types.ts
+++ b/packages/ui/src/utils/component-options/types.ts
@@ -45,3 +45,5 @@ export type ExtractComponentProps = true extends boolean ? ExtractDefineCompo
export type ExtractComponentEmits = ComponentEmit
export type ExtractComponentPropTypes = ComponentProps
+
+export type DateRequest = {date: Date | string, key?: string}