feat: add past and future parts to cells in date picker calendar

Author: FrediWa

packages/date-picker/src/vaadin-date-picker-helper.js

@@ -36,6 +36,18 @@ export function getISOWeekNumber(date) {
   return Math.floor(daysSinceFirstOfJanuary / 7 + 1);
 }
 
+/**
+ * Creates a new object with the same date, but sets the hours, minutes, seconds and milliseconds to 0.
+ *
+ * @param {Date} date
+ * @return {Date} The same date time elements set to 0.
+ */
+export function normalizeDate(date) {
+  const normalizedDate = new Date(date);
+  normalizedDate.setHours(0, 0, 0, 0);
+  return normalizedDate;
+}
+
 /**
  * Check if two dates are equal.
  *
@@ -45,11 +57,7 @@ export function getISOWeekNumber(date) {
  */
 export function dateEquals(date1, date2) {
   return (
-    date1 instanceof Date &&
-    date2 instanceof Date &&
-    date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate()
+    date1 instanceof Date && date2 instanceof Date && normalizeDate(date1).getTime() === normalizeDate(date2).getTime()
   );
 }
 

packages/date-picker/src/vaadin-lit-month-calendar.js

@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
+import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -62,13 +62,17 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                   const isFocused = dateEquals(date, this.focusedDate);
                   const isSelected = dateEquals(date, this.selectedDate);
                   const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
+                  const greaterThanToday = normalizeDate(date) > normalizeDate(new Date());
+                  const lessThanToday = normalizeDate(date) < normalizeDate(new Date());
 
                   const parts = [
                     'date',
                     isDisabled && 'disabled',
                     isFocused && 'focused',
                     isSelected && 'selected',
                     this._isToday(date) && 'today',
+                    greaterThanToday && 'future',
+                    lessThanToday && 'past',
                   ].filter(Boolean);
 
                   return html`

packages/date-picker/src/vaadin-month-calendar.js

@@ -7,7 +7,7 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
+import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -110,8 +110,11 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   // eslint-disable-next-line @typescript-eslint/max-params
   __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
     const result = ['date'];
+    const dayDisabled = this.__isDayDisabled(date, minDate, maxDate, isDateDisabled);
+    const greaterThanToday = normalizeDate(date) > normalizeDate(new Date());
+    const lessThanToday = normalizeDate(date) < normalizeDate(new Date());
 
-    if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
+    if (dayDisabled) {
       result.push('disabled');
     }
 
@@ -127,6 +130,14 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       result.push('today');
     }
 
+    if (lessThanToday) {
+      result.push('past');
+    }
+
+    if (greaterThanToday) {
+      result.push('future');
+    }
+
     return result.join(' ');
   }
 

packages/date-picker/test/month-calendar.common.js

@@ -161,6 +161,46 @@ describe('vaadin-month-calendar', () => {
     expect(monthCalendar.selectedDate).to.be.undefined;
   });
 
+  describe('past and future dates', () => {
+    let yesterdayCell, todayCell, tomorrowCell;
+    let clock;
+    beforeEach(async () => {
+      clock = sinon.useFakeTimers({
+        now: new Date('2024-08-16'),
+        toFake: ['Date'],
+      });
+
+      const today = new Date();
+
+      monthCalendar.month = today;
+      await nextRender();
+
+      todayCell = getDateCells(monthCalendar).find((dateElement) => dateElement.date.getDate() === today.getDate());
+      yesterdayCell = todayCell.previousElementSibling;
+      tomorrowCell = todayCell.nextElementSibling;
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should add past part to past dates', () => {
+      expect(yesterdayCell.getAttribute('part')).to.contain('past');
+    });
+
+    it('should not add past part to today', () => {
+      expect(todayCell.getAttribute('part')).to.not.contain('past');
+    });
+
+    it('should add future part to future dates', () => {
+      expect(tomorrowCell.getAttribute('part')).to.contain('future');
+    });
+
+    it('should not add future part to today', () => {
+      expect(todayCell.getAttribute('part')).to.not.contain('future');
+    });
+  });
+
   describe('i18n', () => {
     beforeEach(async () => {
       monthCalendar.i18n = {