Merge pull request #238 from ing-bank/fix/dateHours

Fix/date hours

packages/calendar/src/LionCalendar.js

@@ -9,6 +9,7 @@ import { isSameDate } from './utils/isSameDate.js';
 import { calendarStyle } from './calendarStyle.js';
 import './utils/differentKeyNamesShimIE.js';
 import { createDay } from './utils/createDay.js';
+import { normalizeDateTime } from './utils/normalizeDateTime.js';
 
 /**
  * @customElement
@@ -152,7 +153,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     this.disableDates = () => false;
     this.firstDayOfWeek = 0;
     this.weekdayHeaderNotation = 'short';
-    this.__today = new Date();
+    this.__today = normalizeDateTime(new Date());
     this.centralDate = this.__today;
     this.__focusedDate = null;
     this.__connectedCallbackDone = false;
@@ -330,7 +331,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
   __coreDayPreprocessor(_day, { currentMonth = false } = {}) {
     const day = createDay(new Date(_day.date), _day);
-    const today = new Date();
+    const today = normalizeDateTime(new Date());
     day.central = isSameDate(day.date, this.centralDate);
     day.previousMonth = currentMonth && day.date.getMonth() < currentMonth.getMonth();
     day.currentMonth = currentMonth && day.date.getMonth() === currentMonth.getMonth();
@@ -341,10 +342,11 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.future = day.date > today;
     day.disabled = this.disableDates(day.date);
 
-    if (this.minDate && day.date < this.minDate) {
+    if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
     }
-    if (this.maxDate && day.date > this.maxDate) {
+
+    if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
     }
 

packages/calendar/src/utils/normalizeDateTime.js

@@ -0,0 +1,8 @@
+/**
+ * @desc Makes suitable for date comparisons
+ * @param {Date} d
+ * @returns {Date}
+ */
+export function normalizeDateTime(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}

packages/calendar/test/lion-calendar.test.js

@@ -338,6 +338,48 @@ describe('<lion-calendar>', () => {
 
         clock.restore();
       });
+
+      describe('Normalization', () => {
+        it('normalizes all generated dates', async () => {
+          function isNormalizedDate(d) {
+            return d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0;
+          }
+
+          const el = await fixture(
+            html`
+              <lion-calendar></lion-calendar>
+            `,
+          );
+          // The central date will be today's date: it's the date all other
+          // dates in the month view will be derived from.
+          expect(isNormalizedDate(el.centralDate)).to.be.true;
+        });
+
+        it('normalizes dates in date comparisons', async () => {
+          const selectedDate = new Date('2000-11-04T03:00:00');
+          // without normalization, selectedDate > maxDate would wrongfully be disabled
+          const maxDate = new Date('2000-11-29T02:00:00');
+          // without normalization, selectedDate < minDate would wrongfully be disabled
+          const minDate = new Date('2000-11-02T04:00:00');
+
+          const el = await fixture(
+            html`
+              <lion-calendar
+                .selectedDate="${selectedDate}"
+                .minDate="${minDate}"
+                .maxDate="${maxDate}"
+              ></lion-calendar>
+            `,
+          );
+          const elObj = new CalendarObject(el);
+
+          expect(elObj.getDayObj(29).isDisabled).to.equal(false);
+          expect(elObj.getDayObj(30).isDisabled).to.equal(true);
+
+          expect(elObj.getDayObj(2).isDisabled).to.equal(false);
+          expect(elObj.getDayObj(1).isDisabled).to.equal(true);
+        });
+      });
     });
   });
 

packages/calendar/test/utils/normalizeDateTime.test.js

@@ -0,0 +1,16 @@
+import { expect } from '@open-wc/testing';
+import { normalizeDateTime } from '../../src/utils/normalizeDateTime.js';
+
+describe('normalizeDateTime', () => {
+  it('returns a date with hours, minutes and seconds set to 0', () => {
+    const date = normalizeDateTime(new Date('2000-11-29T12:34:56'));
+
+    expect(date.getFullYear()).to.equal(2000);
+    expect(date.getMonth()).to.equal(10);
+    expect(date.getDate()).to.equal(29);
+    // normalized parts
+    expect(date.getHours()).to.equal(0);
+    expect(date.getMinutes()).to.equal(0);
+    expect(date.getSeconds()).to.equal(0);
+  });
+});