feat: add past and future parts to cells in date picker calendar (#7691)

* remove unit tests

* address feedback

* remove redundant normalizeDate

* Update packages/date-picker/test/dom/month-calendar.test.js

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>

---------

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>

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 = date > normalizeDate(new Date());
+                  const lessThanToday = 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,6 +110,8 @@ 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 greaterThanToday = date > normalizeDate(new Date());
+    const lessThanToday = date < normalizeDate(new Date());
 
     if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
       result.push('disabled');
@@ -127,6 +129,14 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       result.push('today');
     }
 
+    if (lessThanToday) {
+      result.push('past');
+    }
+
+    if (greaterThanToday) {
+      result.push('future');
+    }
+
     return result.join(' ');
   }