feat(date-picker): add selectedDate property to highlight selected month and year in views

Author: jmkcoder

src/components/date-picker/components/month-view.ts

@@ -4,6 +4,7 @@ export interface MonthViewConfig {
   formatter: IDateFormatter;
   locale: string;
   viewDate: Date;
+  selectedDate?: Date | null; // Add selectedDate to determine which month to highlight
 }
 
 export interface MonthViewCallbacks {
@@ -25,7 +26,13 @@ export class MonthView {
     const monthNames = this.getMonthNames('short');
     const currentYear = this.config.viewDate.getFullYear();
     const currentMonth = new Date().getFullYear() === currentYear ? new Date().getMonth() : -1;
-    const selectedMonth = this.config.viewDate.getMonth();
+    
+    // Determine which month to highlight as selected
+    // This is the key change: only mark a month as selected if the selectedDate is in the current view year
+    let selectedMonth = -1;
+    if (this.config.selectedDate && this.config.selectedDate.getFullYear() === currentYear) {
+      selectedMonth = this.config.selectedDate.getMonth();
+    }
 
     // Month grid is 4 rows x 3 columns
     const rows = 4;

src/components/date-picker/components/year-view.ts

@@ -1,5 +1,6 @@
 export interface YearViewConfig {
   viewDate: Date;
+  selectedDate?: Date | null; // Add selectedDate property to decide what to highlight
 }
 
 export interface YearViewCallbacks {
@@ -25,12 +26,22 @@ export class YearView {
     const rows = 5;
     const cols = 3;
 
+    // Only highlight the year if it's in the current view range
+    let yearToHighlight = -1;
+    if (this.config.selectedDate) {
+      const selectedYear = this.config.selectedDate.getFullYear();
+      // Only highlight if the selected year is within the display range
+      if (selectedYear >= startYear && selectedYear <= startYear + (rows * cols - 1)) {
+        yearToHighlight = selectedYear;
+      }
+    }
+    
     for (let i = 0; i < rows; i++) {
       yearsContent += '<div class="date-picker-row" role="row">';
 
       for (let j = 0; j < cols; j++) {
         const yearValue = startYear + i * cols + j;
-        const isSelected = currentYear === yearValue;
+        const isSelected = yearValue === yearToHighlight;
         const isCurrent = new Date().getFullYear() === yearValue;
 
         let cellClass = 'date-picker-cell year-cell';

src/components/date-picker/date-picker.ts

@@ -516,27 +516,20 @@ export class DatePicker extends HTMLElement implements EventListenerObject {
 
     // Use setTimeout to ensure animation is visible
     setTimeout(() => {
-      // Perform the actual navigation
-      const currentDate = this.stateService.viewDate;
-      const newDate = new Date(currentDate);
-      
       if (direction === 'previous') {
-        newDate.setMonth(currentDate.getMonth() - 1);
+        this.stateService.navigateToPreviousPeriod();
       } else if (direction === 'next') {
-        newDate.setMonth(currentDate.getMonth() + 1);
+        this.stateService.navigateToNextPeriod();
       } else if (direction === 'previous-year') {
-        newDate.setFullYear(currentDate.getFullYear() - 1);
+        this.stateService.navigateToPreviousPeriod();
       } else if (direction === 'next-year') {
-        newDate.setFullYear(currentDate.getFullYear() + 1);
+        this.stateService.navigateToNextPeriod();
       } else if (direction === 'previous-decade') {
-        newDate.setFullYear(currentDate.getFullYear() - 10);
+        this.stateService.navigateToPreviousPeriod();
       } else if (direction === 'next-decade') {
-        newDate.setFullYear(currentDate.getFullYear() + 10);
+        this.stateService.navigateToNextPeriod();
       }
 
-      // Update state
-      this.stateService.viewDate = newDate;
-      
       // Remove animation class after animation completes
       setTimeout(() => {
         this.calendarElement.classList.remove(animationClass);

src/components/date-picker/services/ui-updater.service.ts

@@ -628,7 +628,11 @@ export class UIUpdaterService {
     monthsContainer.classList.add('date-picker-months-grid');
     monthsContainer.setAttribute('role', 'grid');
 
-    // Create months grid (3x4)
+    // Current date for highlighting today's month if in current year
+    const today = new Date();
+    const isCurrentYear = today.getFullYear() === year;
+    
+    // Create months grid (4x3)
     for (let row = 0; row < 4; row++) {
       const monthRow = document.createElement('div');
       monthRow.classList.add('date-picker-row');
@@ -639,8 +643,14 @@ export class UIUpdaterService {
         const monthElement = document.createElement('div');
         monthElement.classList.add('date-picker-cell', 'month-cell');
         monthElement.setAttribute('role', 'gridcell');
+        monthElement.setAttribute('data-month', monthIndex.toString());
+        
+        // Only add selected class if we're looking at the current month in the current view
+        // This is the key fix: Only highlight the month if it's the selected month AND in the current year
+        const currentDate = new Date();
+        currentDate.setFullYear(year);
+        currentDate.setMonth(monthIndex);
 
-        // Check if month is selected
         if (monthIndex === currentMonth) {
           monthElement.classList.add('selected');
           monthElement.setAttribute('tabindex', '0');
@@ -649,8 +659,7 @@ export class UIUpdaterService {
         }
 
         // Check if it's current month in current year
-        const today = new Date();
-        if (today.getMonth() === monthIndex && today.getFullYear() === year) {
+        if (isCurrentYear && today.getMonth() === monthIndex) {
           monthElement.classList.add('current');
         }
 
@@ -687,8 +696,8 @@ export class UIUpdaterService {
     yearsContainer.classList.add('date-picker-years-grid');
     yearsContainer.setAttribute('role', 'grid');
 
-    // Track if the selected year is in the displayed range
-    let selectedYearVisible = false;
+    // Only highlight the year if it's within the current view range
+    const shouldHighlight = currentYear >= startYear && currentYear <= endYear;
 
     // Create years grid (4x3)
     let yearIndex = startYear;
@@ -703,13 +712,14 @@ export class UIUpdaterService {
           const yearElement = document.createElement('div');
           yearElement.classList.add('date-picker-cell', 'year-cell');
           yearElement.setAttribute('role', 'gridcell');
+          yearElement.setAttribute('data-year', yearIndex.toString());
+          
+          // Only highlight if the year is in the current view range
+          const isSelected = shouldHighlight && (yearIndex === currentYear);
 
-          // Check if year is selected
-          const isSelected = yearIndex === currentYear;
           if (isSelected) {
             yearElement.classList.add('selected');
             yearElement.setAttribute('tabindex', '0');
-            selectedYearVisible = true;
           } else {
             yearElement.setAttribute('tabindex', '-1');
           }
@@ -729,8 +739,6 @@ export class UIUpdaterService {
             // Prevent the event from bubbling up which might cause the calendar to close
             e.stopPropagation();
             e.preventDefault();
-            // Log which year was selected for debugging
-            console.log(`Year selected: ${actualYear}`);
             onSelectYear(actualYear);
           });
 

src/components/date-picker/services/ui.service.ts

@@ -341,7 +341,8 @@ export class UIService{
       {
         formatter: this.formatter,
         locale: this.state.locale,
-        viewDate: this.state.viewDate
+        viewDate: this.state.viewDate,
+        selectedDate: this.state.selectedDate  // Pass selected date to determine which month to highlight
       },
       {
         onMonthSelect: this.handleMonthSelect.bind(this)
@@ -357,7 +358,8 @@ export class UIService{
   private renderYearView(): void {
     const yearView = new YearView(
       {
-        viewDate: this.state.viewDate
+        viewDate: this.state.viewDate,
+        selectedDate: this.state.selectedDate  // Pass selected date to determine which year to highlight
       },
       {
         onYearSelect: this.handleYearSelect.bind(this)