feat(datepicker): DP-175969 add min and max date props (#1053)

Co-authored-by: francisrupert <francis.rupert@dialpad.com>

Author: joandvgv

apps/dialtone-documentation/docs/components/datepicker.md

@@ -335,6 +335,35 @@ vueCode='
 '
 />
 
+### With min/max date
+
+Constrain the selectable date range by providing `min-date` and/or `max-date` props. Days outside the range are disabled and navigation buttons are disabled when the target month is fully out of range.
+
+<code-well-header>
+  <dt-datepicker
+    :selected-date="currentSelectedDate"
+    :min-date="minDate"
+    :max-date="maxDate"
+    @selected-date="currentSelectedDate = $event;"
+  />
+</code-well-header>
+
+<code-example-tabs
+vueCode='
+<script setup>
+const today = new Date();
+const minDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5);
+const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 15);
+</script>
+
+<dt-datepicker
+  :selected-date="new Date()"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+'
+showHtmlWarning />
+
 ## Vue API
 
 <component-vue-api component-name="datepicker"></component-vue-api>
@@ -529,6 +558,10 @@ const { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } =
 const currentSelectedDate = ref(new Date());
 const datepickerOpened = ref(false);
 
+const today = new Date();
+const minDate = ref(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5));
+const maxDate = ref(new Date(today.getFullYear(), today.getMonth(), today.getDate() + 15));
+
 const toggleDatepicker = () => {
   datepickerOpened.value = !datepickerOpened.value;
 };

packages/dialtone-css/lib/build/less/components/datepicker.less

@@ -22,7 +22,6 @@
     padding: 0 var(--dt-space-300);
   }
 
-
   &__month-year {
     justify-content: space-between;
     width: 100%;
@@ -40,6 +39,11 @@
   &__nav-btn {
     width: var(--datepicker-button-size);
     height: var(--datepicker-button-size);
+
+    &:disabled {
+      background-color: var(--dt-color-neutral-transparent);
+      opacity: var(--dt-opacity-900);
+    }
   }
 
   &__weekday {
@@ -76,8 +80,8 @@
     }
 
     &--disabled {
-      color: var(--dt-color-foreground-muted);
       background-color: var(--dt-color-neutral-transparent);
+      opacity: var(--dt-opacity-900);
     }
   }
 }

packages/dialtone-vue/components/datepicker/composables/useCalendar.js

@@ -25,7 +25,7 @@ export function useCalendar (props, emits) {
   }
 
   function setDayRef (el, day) {
-    if (!daysRef.value.some(day => day.el === el) && day.currentMonth) {
+    if (!daysRef.value.some(day => day.el === el) && !day.disabled) {
       daysRef.value.push({ el, day });
     }
   }
@@ -116,7 +116,7 @@ export function useCalendar (props, emits) {
   }
 
   function selectDay (day) {
-    if (!day.currentMonth) { return; }
+    if (day.disabled) { return; }
 
     // local selectedDay is updated when a day is selected
     selectedDay.value = day.text;

packages/dialtone-vue/components/datepicker/composables/useMonthYearPicker.js

@@ -1,5 +1,5 @@
 import { computed, ref, watch } from 'vue';
-import { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';
+import { addMonths, endOfMonth, getDate, getMonth, getYear, set, startOfDay, startOfMonth, subMonths } from 'date-fns';
 import { formatMonth, getCalendarDays } from '../utils.js';
 import { INTL_MONTH_FORMAT } from '../datepicker_constants';
 import { returnFirstEl } from '@/common/utils';
@@ -14,7 +14,31 @@ export function useMonthYearPicker (props, emits) {
   const i18n = new DialtoneLocalization();
 
   const calendarDays = computed(() => {
-    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);
+    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value, props.minDate, props.maxDate);
+  });
+
+  const isPrevMonthDisabled = computed(() => {
+    if (!props.minDate) return false;
+    const prevMonth = subMonths(new Date(selectYear.value, selectMonth.value, 1), 1);
+    return endOfMonth(prevMonth) < startOfDay(props.minDate);
+  });
+
+  const isNextMonthDisabled = computed(() => {
+    if (!props.maxDate) return false;
+    const nextMonth = addMonths(new Date(selectYear.value, selectMonth.value, 1), 1);
+    return startOfMonth(nextMonth) > startOfDay(props.maxDate);
+  });
+
+  const isPrevYearDisabled = computed(() => {
+    if (!props.minDate) return false;
+    const prevYearMonth = new Date(selectYear.value - 1, selectMonth.value, 1);
+    return endOfMonth(prevYearMonth) < startOfDay(props.minDate);
+  });
+
+  const isNextYearDisabled = computed(() => {
+    if (!props.maxDate) return false;
+    const nextYearMonth = new Date(selectYear.value + 1, selectMonth.value, 1);
+    return startOfMonth(nextYearMonth) > startOfDay(props.maxDate);
   });
 
   watch(selectMonth, () => {
@@ -27,6 +51,14 @@ export function useMonthYearPicker (props, emits) {
     emits('calendar-days', calendarDays.value);
   }, { immediate: true });
 
+  watch(() => props.minDate, () => {
+    emits('calendar-days', calendarDays.value);
+  });
+
+  watch(() => props.maxDate, () => {
+    emits('calendar-days', calendarDays.value);
+  });
+
   function formattedMonth (month) {
     return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);
   }
@@ -93,6 +125,9 @@ export function useMonthYearPicker (props, emits) {
   }
 
   function changeMonth (value) {
+    if (value === -1 && isPrevMonthDisabled.value) return;
+    if (value === 1 && isNextMonthDisabled.value) return;
+
     // Adjust year when changing from January to December or vice versa
     if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {
       selectYear.value += value;
@@ -107,6 +142,9 @@ export function useMonthYearPicker (props, emits) {
   }
 
   function changeYear (value) {
+    if (value === -1 && isPrevYearDisabled.value) return;
+    if (value === 1 && isNextYearDisabled.value) return;
+
     selectYear.value = selectYear.value + value;
   }
 
@@ -145,6 +183,10 @@ export function useMonthYearPicker (props, emits) {
     changeYear,
     goToNextMonth,
     goToPrevMonth,
+    isPrevMonthDisabled,
+    isNextMonthDisabled,
+    isPrevYearDisabled,
+    isNextYearDisabled,
     previousYearAriaLabel,
     previousMonthAriaLabel,
     nextYearAriaLabel,

packages/dialtone-vue/components/datepicker/datepicker.stories.js

@@ -11,6 +11,8 @@ export const argsData = {
   onCloseDatepicker: action('close-datepicker'),
   date: new Date(),
   opened: false,
+  minDate: null,
+  maxDate: null,
 };
 
 export const argTypesData = {