From 0187e405bde37da3ee31828133936a9afd537ca6 Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Fri, 14 Mar 2025 09:53:04 +0100 Subject: [PATCH 1/4] feat: add a maxDate prop on datepicker --- .../components/OcDatepicker/OcDatepicker.vue | 24 ++++++++++++++++--- .../src/components/Modals/DatePickerModal.vue | 2 ++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue index c0bf6951134..b0f386119b2 100644 --- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue +++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue @@ -5,6 +5,7 @@ :label="label" type="date" :min="minDate?.toISODate()" + :max="maxDate?.toISODate()" :fix-message-line="true" :error-message="errorMessage" :clear-button-enabled="isClearable" @@ -25,7 +26,8 @@ export default defineComponent({ label: { type: String, required: true }, isClearable: { type: Boolean, default: true }, currentDate: { type: Object as PropType, required: false, default: null }, - minDate: { type: Object as PropType, required: false, default: null } + minDate: { type: Object as PropType, required: false, default: null }, + maxDate: { type: Object as PropType, required: false, default: null } }, emits: ['dateChanged'], setup(props, { emit }) { @@ -44,6 +46,13 @@ export default defineComponent({ return unref(date) < props.minDate }) + const isMaxDateExceeded = computed(() => { + if (!props.maxDate || !unref(date)) { + return false + } + return unref(date) > props.maxDate + }) + const errorMessage = computed(() => { if (unref(isMinDateUndercut)) { return $gettext('The date must be after %{date}', { @@ -53,6 +62,14 @@ export default defineComponent({ .toLocaleString(DateTime.DATE_SHORT) }) } + if (unref(isMaxDateExceeded)) { + return $gettext('The date must be before %{date}', { + date: props.maxDate + .plus({ day: 1 }) + .setLocale(current) + .toLocaleString(DateTime.DATE_SHORT) + }) + } return '' }) @@ -73,6 +90,7 @@ export default defineComponent({ date, () => { emit('dateChanged', { date: unref(date), error: unref(isMinDateUndercut) }) + emit('dateChanged', { date: unref(date), error: unref(isMaxDateExceeded) }) }, { deep: true @@ -97,7 +115,7 @@ export default defineComponent({ ```js