Calendar refresh v2

plugins/CoreHome/vue/src/DatePicker/DatePicker.vue

@@ -27,6 +27,8 @@ export default defineComponent({
   props: {
     selectedDateStart: Date,
     selectedDateEnd: Date,
+    persistentHighlightedDateStart: Date,
+    persistentHighlightedDateEnd: Date,
     highlightedDateStart: Date,
     highlightedDateEnd: Date,
     viewDate: [String, Date],
@@ -40,12 +42,27 @@ export default defineComponent({
 
     function setDateCellColor($dateCell: JQuery, dateValue: Date): void {
       const $dateCellLink = $dateCell.children('a');
-
-      if (props.selectedDateStart
-        && props.selectedDateEnd
-        && dateValue >= props.selectedDateStart
-        && dateValue <= props.selectedDateEnd
-      ) {
+      const { selectedDateStart, selectedDateEnd } = props;
+      const dateValueTime = dateValue.getTime();
+      const isPersistentlyHighlightedDate = !!(
+        props.persistentHighlightedDateStart
+        && props.persistentHighlightedDateEnd
+        && dateValue >= props.persistentHighlightedDateStart
+        && dateValue <= props.persistentHighlightedDateEnd
+      );
+
+      // Intentional UX: for custom date ranges (dual calendar) we only style the boundary dates
+      // as selected. The in-between span is not kept persistently highlighted.
+      const isBoundarySelectedDate = !!(
+        selectedDateStart
+        && selectedDateEnd
+        && (
+          dateValueTime === selectedDateStart.getTime()
+          || dateValueTime === selectedDateEnd.getTime()
+        )
+      );
+
+      if (isBoundarySelectedDate) {
         $dateCell.addClass('ui-datepicker-current-period');
       } else {
         $dateCell.removeClass('ui-datepicker-current-period');
@@ -56,13 +73,26 @@ export default defineComponent({
         && dateValue >= props.highlightedDateStart
         && dateValue <= props.highlightedDateEnd
       ) {
-        // other-month cells don't have links, so the <td> must have the ui-state-hover class
-        const elementToAddClassTo = $dateCellLink.length ? $dateCellLink : $dateCell;
-        elementToAddClassTo.addClass('ui-state-hover');
+        // Always mark the td so hover can fill full cell area (including horizontal padding).
+        $dateCell.addClass('ui-state-hover');
+        // Keep anchor class too for existing link-focused hover styling.
+        if ($dateCellLink.length) {
+          $dateCellLink.addClass('ui-state-hover');
+        }
       } else {
         $dateCell.removeClass('ui-state-hover');
         $dateCellLink.removeClass('ui-state-hover');
       }
+
+      if (isPersistentlyHighlightedDate) {
+        $dateCell.addClass('ui-datepicker-persistent-highlight');
+        if ($dateCellLink.length) {
+          $dateCellLink.addClass('ui-datepicker-persistent-highlight');
+        }
+      } else {
+        $dateCell.removeClass('ui-datepicker-persistent-highlight');
+        $dateCellLink.removeClass('ui-datepicker-persistent-highlight');
+      }
     }
 
     function getCellDate($dateCell: JQuery, month: number, year: number): Date {
@@ -168,6 +198,14 @@ export default defineComponent({
 
       // add href to left/right nav in calendar so they can be accessed via keyboard
       element.find('.ui-datepicker-prev,.ui-datepicker-next').attr('href', '');
+
+      // Use explicit chevron classes so scoped styles can render modern nav icons.
+      element.find('.ui-datepicker-prev .ui-icon')
+        .removeClass('ui-icon-circle-triangle-w')
+        .addClass('icon-chevron-left');
+      element.find('.ui-datepicker-next .ui-icon')
+        .removeClass('ui-icon-circle-triangle-e')
+        .addClass('icon-chevron-right');
     }
 
     function stepMonthsChanged(): boolean {
@@ -235,6 +273,8 @@ export default defineComponent({
       [
         (x: typeof props): Date|undefined => x.selectedDateStart,
         (x: typeof props): Date|undefined => x.selectedDateEnd,
+        (x: typeof props): Date|undefined => x.persistentHighlightedDateStart,
+        (x: typeof props): Date|undefined => x.persistentHighlightedDateEnd,
         (x: typeof props): Date|undefined => x.highlightedDateStart,
         (x: typeof props): Date|undefined => x.highlightedDateEnd,
       ].forEach((selector) => {
@@ -273,7 +313,7 @@ export default defineComponent({
         enableDisableMonthDropdown();
       }
 
-      // redraw when selected/highlighted dates change
+      // redraw when selected or highlighted date props change
       if (redraw) {
         setDatePickerCellColors();
       }

plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less

@@ -1,3 +1,9 @@
 .dateRangePicker {
   display: block;
+  .date-range-picker-label {
+    margin-left: 10px;
+    .date-range-picker-field {
+      font-size: 13px !important;
+    }
+  }
 }

plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue

@@ -8,13 +8,13 @@
 <template>
   <div class="dateRangePicker">
     <div id="calendarRangeFrom">
-      <h6>
+      <h6 class="date-range-picker-label">
         {{ translate('General_DateRangeFrom') }}
         <input
           type="text"
           id="inputCalendarFrom"
           name="inputCalendarFrom"
-          class="browser-default"
+          class="browser-default date-range-picker-field"
           v-model="startDateText"
           @keydown="onRangeInputChanged('from', $event)"
           @keyup="handleEnterPress($event)"
@@ -23,24 +23,24 @@
       <DatePicker
         id="calendarFrom"
         :view-date="startDate"
-        :selected-date-start="fromPickerSelectedDates[0]"
-        :selected-date-end="fromPickerSelectedDates[1]"
-        :highlighted-date-start="fromPickerHighlightedDates[0]"
-        :highlighted-date-end="fromPickerHighlightedDates[1]"
+        :selected-date-start="fromPickerSelectedDate"
+        :selected-date-end="fromPickerSelectedDate"
+        :highlighted-date-start="fromPickerHoveredDate"
+        :highlighted-date-end="fromPickerHoveredDate"
         @date-select="setStartRangeDate($event.date)"
-        @cell-hover="fromPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)"
-        @cell-hover-leave="fromPickerHighlightedDates = [null, null]"
+        @cell-hover="fromPickerHoveredDate = getNewHoveredDate($event.date, $event.$cell)"
+        @cell-hover-leave="fromPickerHoveredDate = null"
       >
       </DatePicker>
     </div>
     <div id="calendarRangeTo">
-      <h6>
+      <h6 class="date-range-picker-label">
         {{ translate('General_DateRangeTo') }}
         <input
           type="text"
           id="inputCalendarTo"
           name="inputCalendarTo"
-          class="browser-default"
+          class="browser-default date-range-picker-field"
           v-model="endDateText"
           @keydown="onRangeInputChanged('to', $event)"
           @keyup="handleEnterPress($event)"
@@ -49,13 +49,13 @@
       <DatePicker
         id="calendarTo"
         :view-date="endDate"
-        :selected-date-start="toPickerSelectedDates[0]"
-        :selected-date-end="toPickerSelectedDates[1]"
-        :highlighted-date-start="toPickerHighlightedDates[0]"
-        :highlighted-date-end="toPickerHighlightedDates[1]"
+        :selected-date-start="toPickerSelectedDate"
+        :selected-date-end="toPickerSelectedDate"
+        :highlighted-date-start="toPickerHoveredDate"
+        :highlighted-date-end="toPickerHoveredDate"
         @date-select="setEndRangeDate($event.date)"
-        @cell-hover="toPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)"
-        @cell-hover-leave="toPickerHighlightedDates = [null, null]"
+        @cell-hover="toPickerHoveredDate = getNewHoveredDate($event.date, $event.$cell)"
+        @cell-hover-leave="toPickerHoveredDate = null"
       >
       </DatePicker>
     </div>
@@ -71,17 +71,18 @@ import ChangeEvent = JQuery.ChangeEvent;
 const DATE_FORMAT = 'YYYY-MM-DD';
 
 interface DateRangePickerState {
-  fromPickerSelectedDates: (Date|null)[];
-  toPickerSelectedDates: (Date|null)[];
-  fromPickerHighlightedDates: (Date|null)[];
-  toPickerHighlightedDates: (Date|null)[];
+  fromPickerSelectedDate: Date|null;
+  toPickerSelectedDate: Date|null;
+  fromPickerHoveredDate: Date|null;
+  toPickerHoveredDate: Date|null;
   startDateText?: string;
   endDateText?: string;
   startDateInvalid: boolean;
   endDateInvalid: boolean;
 }
 
 export default defineComponent({
+  name: 'DateRangePicker',
   props: {
     startDate: String,
     endDate: String,
@@ -109,10 +110,10 @@ export default defineComponent({
     }
 
     return {
-      fromPickerSelectedDates: [startDate, startDate],
-      toPickerSelectedDates: [endDate, endDate],
-      fromPickerHighlightedDates: [null, null],
-      toPickerHighlightedDates: [null, null],
+      fromPickerSelectedDate: startDate,
+      toPickerSelectedDate: endDate,
+      fromPickerHoveredDate: null,
+      toPickerHoveredDate: null,
       startDateText: this.startDate,
       endDateText: this.endDate,
       startDateInvalid: false,
@@ -135,12 +136,12 @@ export default defineComponent({
   },
   methods: {
     setStartRangeDate(date: Date) {
-      this.fromPickerSelectedDates = [date, date];
+      this.fromPickerSelectedDate = date;
 
       this.rangeChanged();
     },
     setEndRangeDate(date: Date) {
-      this.toPickerSelectedDates = [date, date];
+      this.toPickerSelectedDate = date;
 
       this.rangeChanged();
     },
@@ -153,12 +154,12 @@ export default defineComponent({
         }
       });
     },
-    getNewHighlightedDates(date: Date, $cell: JQuery) {
+    getNewHoveredDate(date: Date, $cell: JQuery): Date|null {
       if ($cell.hasClass('ui-datepicker-unselectable')) {
         return null;
       }
 
-      return [date, date];
+      return date;
     },
     handleEnterPress($event: KeyboardEvent) {
       if ($event.keyCode !== 13) {
@@ -183,7 +184,7 @@ export default defineComponent({
       }
 
       if (startDateParsed) {
-        this.fromPickerSelectedDates = [startDateParsed, startDateParsed];
+        this.fromPickerSelectedDate = startDateParsed;
         this.startDateInvalid = false;
 
         this.rangeChanged();
@@ -202,16 +203,16 @@ export default defineComponent({
       }
 
       if (endDateParsed) {
-        this.toPickerSelectedDates = [endDateParsed, endDateParsed];
+        this.toPickerSelectedDate = endDateParsed;
         this.endDateInvalid = false;
 
         this.rangeChanged();
       }
     },
     rangeChanged() {
       this.$emit('rangeChange', {
-        start: this.fromPickerSelectedDates[0] ? format(this.fromPickerSelectedDates[0]) : null,
-        end: this.toPickerSelectedDates[0] ? format(this.toPickerSelectedDates[0]) : null,
+        start: this.fromPickerSelectedDate ? format(this.fromPickerSelectedDate) : null,
+        end: this.toPickerSelectedDate ? format(this.toPickerSelectedDate) : null,
       });
     },
   },