@coreui/vue-pro 4.3.0-beta.0 → 4.3.1

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -1,12 +1,14 @@
 import { defineComponent, h, onMounted, PropType, ref, watch } from 'vue'
 
+import { format as dateFormat } from 'date-fns'
+
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
 import { CFormInput, CInputGroup, CInputGroupText } from '../form'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { isValidDate } from '../../utils/calendar'
+import { getLocalDateFromString } from '../../utils/calendar'
 
 import { Color } from '../props'
 
@@ -138,16 +140,28 @@ const CDateRangePicker = defineComponent({
      * - 4 - Thursday,
      * - 5 - Friday,
      * - 6 - Saturday,
-     * - 7 - Sunday
      */
     firstDayOfWeek: {
       type: Number,
       default: 1,
     },
+    /**
+     * Set date format.
+     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
+     */
+    format: String,
     /**
      * Toggle visibility of footer element or set the content of footer.
      */
     footer: Boolean,
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     *
+     * The name attributes for input elements are generated based on the `id` property:
+     * - {id}-start-date
+     * - {id}-end-date
+     */
+    id: String,
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -236,6 +250,45 @@ const CDateRangePicker = defineComponent({
      * Provide an additional time selection by adding select boxes to choose times.
      */
     timepicker: Boolean,
+    /**
+     * Toggle visibility or set the content of today button.
+     */
+    todayButton: {
+      type: [Boolean, String],
+      default: 'Today',
+    },
+    /**
+     * Sets the color context of the today button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    todayButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the today button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    todayButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the today button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    todayButtonVariant: {
+      type: String,
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
     /**
      * Set length or format of day name.
      *
@@ -289,6 +342,8 @@ const CDateRangePicker = defineComponent({
     const endDate = ref<Date | null>(props.endDate ? new Date(props.endDate) : null)
     const initialStartDate = ref<Date | null>(startDate.value ? new Date(startDate.value) : null)
     const initialEndDate = ref<Date | null>(endDate.value ? new Date(endDate.value) : null)
+    const maxDate = ref(props.maxDate && new Date(props.maxDate))
+    const minDate = ref(props.minDate && new Date(props.minDate))
     const selectEndDate = ref(false)
 
     const isMobile = ref(false)
@@ -315,11 +370,35 @@ const CDateRangePicker = defineComponent({
       },
     )
 
-    const setInputValue = (date: Date | null, timepicker?: boolean) => {
+    watch(
+      () => props.maxDate,
+      () => {
+        if (props.maxDate) {
+          maxDate.value = new Date(props.maxDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.minDate,
+      () => {
+        if (props.minDate) {
+          minDate.value = new Date(props.minDate)
+        }
+      },
+    )
+
+    const formatDate = (date: Date) => {
+      return props.format
+        ? dateFormat(date, props.format)
+        : props.timepicker
+        ? date.toLocaleString(props.format)
+        : date.toLocaleDateString(props.format)
+    }
+
+    const setInputValue = (date: Date | null) => {
       if (date) {
-        return timepicker
-          ? date.toLocaleString(props.locale)
-          : date.toLocaleDateString(props.locale)
+        return formatDate(date)
       }
 
       return ''
@@ -327,10 +406,10 @@ const CDateRangePicker = defineComponent({
 
     const handleCalendarCellHover = (date: Date | null) => {
       if (selectEndDate.value) {
-        inputEndHoverValue.value = date === null ? null : date
+        inputEndHoverValue.value = date
         return
       }
-      inputStartHoverValue.value = date === null ? null : date
+      inputStartHoverValue.value = date
     }
 
     const handleCalendarDateChange = (date: Date, difference?: number) => {
@@ -349,7 +428,7 @@ const CDateRangePicker = defineComponent({
         selectEndDate.value = true
       }
 
-      emit('start-date-change', date)
+      emit('start-date-change', date, date ? formatDate(date) : undefined)
     }
 
     const handleEndDateChange = (date: Date) => {
@@ -359,7 +438,7 @@ const CDateRangePicker = defineComponent({
         selectEndDate.value = false
       }
 
-      emit('end-date-change', date)
+      emit('end-date-change', date, date ? formatDate(date) : undefined)
     }
 
     const handleClear = (event: Event) => {
@@ -383,22 +462,28 @@ const CDateRangePicker = defineComponent({
               hover: inputStartHoverValue.value,
             },
             disabled: props.disabled,
+            name: props.range ? `${props.id}-start-date` : `${props.id}-date`,
             onClick: () => {
               selectEndDate.value = false
             },
             onInput: (event) => {
-              if (isValidDate(event.target.value)) {
-                calendarDate.value = new Date(event.target.value)
-                startDate.value = new Date(event.target.value)
+              const date = getLocalDateFromString(
+                event.target.value,
+                props.locale,
+                props.timepicker,
+              )
+              if (date instanceof Date && date.getTime()) {
+                calendarDate.value = date
+                startDate.value = date
               }
             },
             placeholder: Array.isArray(props.placeholder)
               ? props.placeholder[0]
               : props.placeholder,
-            readonly: props.inputReadOnly,
+            readonly: props.inputReadOnly || typeof props.format === 'string',
             value: inputStartHoverValue.value
-              ? setInputValue(inputStartHoverValue.value, props.timepicker)
-              : setInputValue(startDate.value, props.timepicker),
+              ? setInputValue(inputStartHoverValue.value)
+              : setInputValue(startDate.value),
           }),
           props.range &&
             props.separator !== false &&
@@ -413,20 +498,26 @@ const CDateRangePicker = defineComponent({
                 hover: inputEndHoverValue.value,
               },
               disabled: props.disabled,
+              name: `${props.id}-end-date`,
               onClick: () => {
                 selectEndDate.value = true
               },
               onInput: (event) => {
-                if (isValidDate(event.target.value)) {
-                  calendarDate.value = new Date(event.target.value)
-                  endDate.value = new Date(event.target.value)
+                const date = getLocalDateFromString(
+                  event.target.value,
+                  props.locale,
+                  props.timepicker,
+                )
+                if (date instanceof Date && date.getTime()) {
+                  calendarDate.value = date
+                  endDate.value = date
                 }
               },
               placeholder: props.placeholder[1],
-              readonly: props.inputReadOnly,
+              readonly: props.inputReadOnly || typeof props.format === 'string',
               value: inputEndHoverValue.value
-                ? setInputValue(inputEndHoverValue.value, props.timepicker)
-                : setInputValue(endDate.value, props.timepicker),
+                ? setInputValue(inputEndHoverValue.value)
+                : setInputValue(endDate.value),
             }),
           (props.indicator || props.cleaner) &&
             h(CInputGroupText, {}, () => [
@@ -471,6 +562,7 @@ const CDateRangePicker = defineComponent({
           confirmButtonVariant: props.confirmButtonVariant,
           disabled: props.disabled,
           footer: props.footer || props.timepicker,
+          id: props.id,
           onCancel: () => {
             startDate.value = initialStartDate.value
             endDate.value = initialEndDate.value
@@ -498,6 +590,23 @@ const CDateRangePicker = defineComponent({
             confirmButton: () => slots.confirmButton && slots.confirmButton(),
           }),
           toggler: () => InputGroup(),
+          footer: () =>
+            h(
+              CButton,
+              {
+                class: 'me-auto',
+                color: props.todayButtonColor,
+                size: props.todayButtonSize,
+                variant: props.todayButtonVariant,
+                onClick: () => {
+                  const date = new Date()
+                  startDate.value = date
+                  endDate.value = date
+                  calendarDate.value = date
+                },
+              },
+              () => props.todayButton,
+            ),
           default: () =>
             h(
               'div',
@@ -529,82 +638,66 @@ const CDateRangePicker = defineComponent({
                 h(
                   'div',
                   { class: 'date-picker-calendars' },
-                  [...Array(isMobile.value ? 1 : props.calendars)].map((_, index) =>
-                    h('div', { class: 'date-picker-calendar' }, [
-                      h(
-                        CCalendar,
-                        {
-                          calendarDate: new Date(
-                            calendarDate.value.getFullYear(),
-                            calendarDate.value.getMonth() + index,
-                            1,
-                          ),
-                          disabledDates: props.disabledDates,
-                          ...(endDate.value && { endDate: endDate.value }),
-                          firstDayOfWeek: props.firstDayOfWeek,
-                          locale: props.locale,
-                          maxDate: props.maxDate,
-                          minDate: props.minDate,
-                          navigation: props.navigation,
-                          range: true,
-                          selectEndDate: selectEndDate.value,
-                          ...(startDate.value && { startDate: startDate.value }),
-                          onCalendarCellHover: (date: Date | null) => handleCalendarCellHover(date),
-                          onCalendarDateChange: (date: Date) =>
-                            handleCalendarDateChange(date, index),
-                          onStartDateChange: (date: Date) => handleStartDateChange(date),
-                          onEndDateChange: (date: Date) => handleEndDateChange(date),
-                        },
-                        {
-                          /**
-                           * @slot Location for next icon.
-                           */
-                          ...(slots.navNextIcon && {
-                            navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
-                          }),
-                          /**
-                           * @slot Location for next double icon.
-                           */
-                          ...(slots.navNextDoubleIcon && {
-                            navNextDoubleIcon: () =>
-                              slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
-                          }),
-                          /**
-                           * @slot Location for previous icon.
-                           */
-                          ...(slots.navPrevIcon && {
-                            navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
-                          }),
-                          /**
-                           * @slot Location for double previous icon.
-                           */
-                          ...(slots.navPrevDoubleIcon && {
-                            navPrevDoubleIcon: () =>
-                              slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
-                          }),
-                        },
+                  h(
+                    CCalendar,
+                    {
+                      calendarDate: new Date(
+                        calendarDate.value.getFullYear(),
+                        calendarDate.value.getMonth(),
+                        1,
                       ),
-                      !isMobile.value &&
-                        props.timepicker &&
-                        (index === 0 || props.calendars - index === 1) &&
-                        h(CTimePicker, {
-                          container: 'inline',
-                          disabled:
-                            index === 0
-                              ? startDate.value === null
-                                ? true
-                                : false
-                              : endDate.value === null
-                              ? true
-                              : false,
-                          locale: props.locale,
-                          onChange: (_: any, __: any, date: Date) =>
-                            index === 0 ? handleStartDateChange(date) : handleEndDateChange(date),
-                          time: index === 0 ? startDate.value : endDate.value,
-                          variant: 'select',
-                        }),
-                      isMobile.value &&
-                        props.timepicker && [
+                      calendars: props.calendars,
+                      disabledDates: props.disabledDates,
+                      ...(endDate.value && { endDate: endDate.value }),
+                      firstDayOfWeek: props.firstDayOfWeek,
+                      locale: props.locale,
+                      maxDate: maxDate.value,
+                      minDate: minDate.value,
+                      navigation: props.navigation,
+                      range: true,
+                      selectEndDate: selectEndDate.value,
+                      ...(startDate.value && { startDate: startDate.value }),
+                      onCalendarCellHover: (date: Date | null) => handleCalendarCellHover(date),
+                      onCalendarDateChange: (date: Date) => handleCalendarDateChange(date),
+                      onStartDateChange: (date: Date) => handleStartDateChange(date),
+                      onEndDateChange: (date: Date) => handleEndDateChange(date),
+                    },
+                    {
+                      /**
+                       * @slot Location for next icon.
+                       */
+                      ...(slots.navNextIcon && {
+                        navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
+                      }),
+                      /**
+                       * @slot Location for next double icon.
+                       */
+                      ...(slots.navNextDoubleIcon && {
+                        navNextDoubleIcon: () =>
+                          slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
+                      }),
+                      /**
+                       * @slot Location for previous icon.
+                       */
+                      ...(slots.navPrevIcon && {
+                        navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
+                      }),
+                      /**
+                       * @slot Location for double previous icon.
+                       */
+                      ...(slots.navPrevDoubleIcon && {
+                        navPrevDoubleIcon: () =>
+                          slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
+                      }),
+                    },
+                  ),
+                ),
+                props.timepicker &&
+                  h(
+                    'div',
+                    { class: 'date-picker-timepickers' },
+                    isMobile.value || (props.range && props.calendars === 1)
+                      ? [
                           h(CTimePicker, {
                             container: 'inline',
                             disabled: startDate.value === null ? true : false,
@@ -621,10 +714,26 @@ const CDateRangePicker = defineComponent({
                             time: endDate.value,
                             variant: 'select',
                           }),
-                        ],
-                    ]),
+                        ]
+                      : [...Array(props.calendars)].map((_, index) =>
+                          h(CTimePicker, {
+                            container: 'inline',
+                            disabled:
+                              index === 0
+                                ? startDate.value === null
+                                  ? true
+                                  : false
+                                : endDate.value === null
+                                ? true
+                                : false,
+                            locale: props.locale,
+                            onChange: (_: any, __: any, date: Date) =>
+                              index === 0 ? handleStartDateChange(date) : handleEndDateChange(date),
+                            time: index === 0 ? startDate.value : endDate.value,
+                            variant: 'select',
+                          }),
+                        ),
                   ),
-                ),
               ],
             ),
         },