@vaadin/date-picker 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/input-container": "24.0.0-alpha1",
-    "@vaadin/overlay": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/field-base": "24.0.0-alpha10",
+    "@vaadin/input-container": "24.0.0-alpha10",
+    "@vaadin/overlay": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-date-picker-helper.d.ts

@@ -48,3 +48,20 @@ declare function extractDateParts(date: Date): { day: number; month: number; yea
 declare function dateAfterXMonths(months: number): number;
 
 export { dateAfterXMonths };
+
+/**
+ * Calculate the year of the date based on the provided reference date
+ * Gets a two-digit year and returns a full year.
+ */
+declare function getAdjustedYear(referenceDate: Date, year: number, month?: number, day?: number): Date;
+
+export { getAdjustedYear };
+
+/**
+ * Parse date string of one of the following date formats:
+ * - ISO 8601 `"YYYY-MM-DD"`
+ * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+ */
+declare function parseDate(str: string): Date;
+
+export { parseDate };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -117,3 +117,50 @@ export function dateAfterXMonths(months) {
   result.setMonth(parseInt(months) + today.getMonth());
   return result;
 }
+
+/**
+ * Calculate the year of the date based on the provided reference date.
+ * Gets a two-digit year and returns a full year.
+ * @param {!Date} referenceDate The date to act as basis in the calculation
+ * @param {!number} year Should be in the range of [0, 99]
+ * @param {number} month
+ * @param {number} day
+ * @return {!number} Adjusted year value
+ */
+export function getAdjustedYear(referenceDate, year, month = 0, day = 1) {
+  if (year > 99) {
+    throw new Error('The provided year cannot have more than 2 digits.');
+  }
+  if (year < 0) {
+    throw new Error('The provided year cannot be negative.');
+  }
+  // Year values up to 2 digits are parsed based on the reference date.
+  let adjustedYear = year + Math.floor(referenceDate.getFullYear() / 100) * 100;
+  if (referenceDate < new Date(adjustedYear - 50, month, day)) {
+    adjustedYear -= 100;
+  } else if (referenceDate > new Date(adjustedYear + 50, month, day)) {
+    adjustedYear += 100;
+  }
+  return adjustedYear;
+}
+
+/**
+ * Parse date string of one of the following date formats:
+ * - ISO 8601 `"YYYY-MM-DD"`
+ * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+ * @param {!string} str Date string to parse
+ * @return {Date} Parsed date
+ */
+export function parseDate(str) {
+  // Parsing with RegExp to ensure correct format
+  const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/u.exec(str);
+  if (!parts) {
+    return undefined;
+  }
+
+  const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
+  date.setFullYear(parseInt(parts[1], 10));
+  date.setMonth(parseInt(parts[2], 10) - 1);
+  date.setDate(parseInt(parts[3], 10));
+  return date;
+}

package/src/vaadin-date-picker-light.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';

package/src/vaadin-date-picker-light.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-date-picker-overlay.js';
@@ -96,14 +96,6 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    const cssSelector = 'vaadin-text-field,.input';
-    this._setInputElement(this.querySelector(cssSelector));
-    this._setFocusElement(this.inputElement);
-  }
-
   /** @return {string | undefined} */
   get _inputValue() {
     return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
@@ -115,6 +107,14 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
     }
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    const cssSelector = 'vaadin-text-field,.input';
+    this._setInputElement(this.querySelector(cssSelector));
+    this._setFocusElement(this.inputElement);
+  }
+
   // Workaround https://github.com/vaadin/web-components/issues/2855
   /** @protected */
   _openedChanged(opened) {

package/src/vaadin-date-picker-mixin.d.ts

@@ -1,13 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
@@ -18,14 +19,69 @@ export interface DatePickerDate {
 }
 
 export interface DatePickerI18n {
+  /**
+   * An array with the full names of months starting
+   * with January.
+   */
   monthNames: string[];
+  /**
+   * An array of weekday names starting with Sunday. Used
+   * in screen reader announcements.
+   */
   weekdays: string[];
+  /**
+   * An array of short weekday names starting with Sunday.
+   * Displayed in the calendar.
+   */
   weekdaysShort: string[];
+  /**
+   * An integer indicating the first day of the week
+   * (0 = Sunday, 1 = Monday, etc.).
+   */
   firstDayOfWeek: number;
+  /**
+   * Translation of the Today shortcut button text.
+   */
   today: string;
+  /**
+   * Translation of the Cancel button text.
+   */
   cancel: string;
+  /**
+   * Used for adjusting the year value when parsing dates with short years.
+   * The year values between 0 and 99 are evaluated and adjusted.
+   * Example: for a referenceDate of 1970-10-30;
+   *   dateToBeParsed: 40-10-30, result: 1940-10-30
+   *   dateToBeParsed: 80-10-30, result: 1980-10-30
+   *   dateToBeParsed: 10-10-30, result: 2010-10-30
+   * Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
+   * The default value is the current date.
+   */
+  referenceDate: string;
+
+  /**
+   * A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
+   * Must properly parse (at least) text formatted by `formatDate`.
+   * Setting the property to null will disable keyboard input feature.
+   * Note: The argument month is 0-based. This means that January = 0 and December = 11.
+   * @param date
+   */
   parseDate(date: string): DatePickerDate | undefined;
+
+  /**
+   * A function to format given `Object` as
+   * date string. Object is in the format `{ day: ..., month: ..., year: ... }`
+   * Note: The argument month is 0-based. This means that January = 0 and December = 11.
+   * @param date
+   */
   formatDate(date: DatePickerDate): string;
+
+  /**
+   * A function to format given `monthName` and
+   * `fullYear` integer as calendar title string.
+   * @param monthName
+   * @param fullYear
+   */
   formatTitle(monthName: string, fullYear: number): string;
 }
 
@@ -38,6 +94,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class DatePickerMixinClass {
@@ -125,6 +182,16 @@ export declare class DatePickerMixinClass {
    *   // Translation of the Cancel button text.
    *   cancel: 'Cancel',
    *
+   *   // Used for adjusting the year value when parsing dates with short years.
+   *   // The year values between 0 and 99 are evaluated and adjusted.
+   *   // Example: for a referenceDate of 1970-10-30;
+   *   //   dateToBeParsed: 40-10-30, result: 1940-10-30
+   *   //   dateToBeParsed: 80-10-30, result: 1980-10-30
+   *   //   dateToBeParsed: 10-10-30, result: 2010-10-30
+   *   // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
+   *   // The default value is the current date.
+   *   referenceDate: '',
+   *
    *   // A function to format given `Object` as
    *   // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
    *   // Note: The argument month is 0-based. This means that January = 0 and December = 11.

package/src/vaadin-date-picker-mixin.js

@@ -1,24 +1,37 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
-import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
-import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
+import {
+  dateAllowed,
+  dateEquals,
+  extractDateParts,
+  getAdjustedYear,
+  getClosestDate,
+  parseDate,
+} from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes InputConstraintsMixin
+ * @mixes KeyboardMixin
+ * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(
-    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  class DatePickerMixinClass extends OverlayClassMixin(
+    ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
   ) {
     static get properties() {
       return {
@@ -152,6 +165,16 @@ export const DatePickerMixin = (subclass) =>
          *   // Translation of the Cancel button text.
          *   cancel: 'Cancel',
          *
+         *   // Used for adjusting the year value when parsing dates with short years.
+         *   // The year values between 0 and 99 are evaluated and adjusted.
+         *   // Example: for a referenceDate of 1970-10-30;
+         *   //   dateToBeParsed: 40-10-30, result: 1940-10-30
+         *   //   dateToBeParsed: 80-10-30, result: 1980-10-30
+         *   //   dateToBeParsed: 10-10-30, result: 2010-10-30
+         *   // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
+         *   // The default value is the current date.
+         *   referenceDate: '',
+         *
          *   // A function to format given `Object` as
          *   // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
          *   // Note: The argument month is 0-based. This means that January = 0 and December = 11.
@@ -203,11 +226,12 @@ export const DatePickerMixin = (subclass) =>
               firstDayOfWeek: 0,
               today: 'Today',
               cancel: 'Cancel',
-              formatDate: (d) => {
-                const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
+              referenceDate: '',
+              formatDate(d) {
+                const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
                 return [d.month + 1, d.day, yearStr].join('/');
               },
-              parseDate: (text) => {
+              parseDate(text) {
                 const parts = text.split('/');
                 const today = new Date();
                 let date,
@@ -215,12 +239,13 @@ export const DatePickerMixin = (subclass) =>
                   year = today.getFullYear();
 
                 if (parts.length === 3) {
+                  month = parseInt(parts[0]) - 1;
+                  date = parseInt(parts[1]);
                   year = parseInt(parts[2]);
                   if (parts[2].length < 3 && year >= 0) {
-                    year += year < 50 ? 2000 : 1900;
+                    const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
+                    year = getAdjustedYear(usedReferenceDate, year, month, date);
                   }
-                  month = parseInt(parts[0]) - 1;
-                  date = parseInt(parts[1]);
                 } else if (parts.length === 2) {
                   month = parseInt(parts[0]) - 1;
                   date = parseInt(parts[1]);
@@ -319,6 +344,14 @@ export const DatePickerMixin = (subclass) =>
       return [...super.constraints, 'min', 'max'];
     }
 
+    constructor() {
+      super();
+
+      this._boundOnClick = this._onClick.bind(this);
+      this._boundOnScroll = this._onScroll.bind(this);
+      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -330,18 +363,6 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    /** @protected */
-    get _inputValue() {
-      return this.inputElement ? this.inputElement.value : undefined;
-    }
-
-    /** @protected */
-    set _inputValue(value) {
-      if (this.inputElement) {
-        this.inputElement.value = value;
-      }
-    }
-
     /** @private */
     get _nativeInput() {
       if (this.inputElement) {
@@ -351,12 +372,16 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    constructor() {
-      super();
+    /** @protected */
+    get _inputValue() {
+      return this.inputElement ? this.inputElement.value : undefined;
+    }
 
-      this._boundOnClick = this._onClick.bind(this);
-      this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+    /** @protected */
+    set _inputValue(value) {
+      if (this.inputElement) {
+        this.inputElement.value = value;
+      }
     }
 
     /**
@@ -380,10 +405,7 @@ export const DatePickerMixin = (subclass) =>
 
       if (!this.opened) {
         if (this.autoOpenDisabled) {
-          const parsedDate = this._getParsedDate();
-          if (this._isValidDate(parsedDate)) {
-            this._selectDate(parsedDate);
-          }
+          this._selectParsedOrFocusedDate();
         }
 
         this.validate();
@@ -408,7 +430,10 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      this.$.overlay.renderer = this._boundOverlayRenderer;
+      const overlay = this.$.overlay;
+      this._overlayElement = overlay;
+
+      overlay.renderer = this._boundOverlayRenderer;
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
@@ -606,21 +631,6 @@ export const DatePickerMixin = (subclass) =>
       });
     }
 
-    /** @private */
-    _parseDate(str) {
-      // Parsing with RegExp to ensure correct format
-      const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
-      if (!parts) {
-        return;
-      }
-
-      const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
-      date.setFullYear(parseInt(parts[1], 10));
-      date.setMonth(parseInt(parts[2], 10) - 1);
-      date.setDate(parseInt(parts[3], 10));
-      return date;
-    }
-
     /** @private */
     // eslint-disable-next-line max-params
     _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
@@ -723,7 +733,7 @@ export const DatePickerMixin = (subclass) =>
      * @override
      */
     _valueChanged(value, oldValue) {
-      const newDate = this._parseDate(value);
+      const newDate = parseDate(value);
 
       if (value && !newDate) {
         // The new value cannot be parsed, revert the old value.
@@ -790,21 +800,17 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _onOverlayOpened() {
-      const parsedInitialPosition = this._parseDate(this.initialPosition);
-
-      const initialPosition =
-        this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
+      // Detect which date to show
+      const initialPosition = this._getInitialPosition();
+      this._overlayContent.initialPosition = initialPosition;
 
-      if (parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)) {
-        this._overlayContent.initialPosition = initialPosition;
-      } else {
-        this._overlayContent.initialPosition = getClosestDate(initialPosition, [this._minDate, this._maxDate]);
-      }
+      // Scroll the date into view
+      const scrollFocusDate = this._overlayContent.focusedDate || initialPosition;
+      this._overlayContent.scrollToDate(scrollFocusDate);
 
-      this._overlayContent.scrollToDate(this._overlayContent.focusedDate || this._overlayContent.initialPosition);
-      // Have a default focused date
+      // Ensure the date is focused
       this._ignoreFocusedDateChange = true;
-      this._overlayContent.focusedDate = this._overlayContent.focusedDate || this._overlayContent.initialPosition;
+      this._overlayContent.focusedDate = scrollFocusDate;
       this._ignoreFocusedDateChange = false;
 
       window.addEventListener('scroll', this._boundOnScroll, true);
@@ -822,6 +828,18 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
+    /** @private */
+    _getInitialPosition() {
+      const parsedInitialPosition = parseDate(this.initialPosition);
+
+      const initialPosition =
+        this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
+
+      return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)
+        ? initialPosition
+        : getClosestDate(initialPosition, [this._minDate, this._maxDate]);
+    }
+
     /** @private */
     _selectParsedOrFocusedDate() {
       // Select the parsed input or focused date
@@ -1019,21 +1037,15 @@ export const DatePickerMixin = (subclass) =>
      * @override
      */
     _onEnter(_event) {
-      const parsedDate = this._getParsedDate();
-      const isValidDate = this._isValidDate(parsedDate);
+      const oldValue = this.value;
       if (this.opened) {
-        if (this._overlayContent && this._overlayContent.focusedDate && isValidDate) {
-          this._selectDate(this._overlayContent.focusedDate);
-        }
+        // Closing will implicitly select parsed or focused date
         this.close();
-      } else if (!isValidDate && this.inputElement.value !== '') {
-        this.validate();
       } else {
-        const oldValue = this.value;
         this._selectParsedOrFocusedDate();
-        if (oldValue === this.value) {
-          this.validate();
-        }
+      }
+      if (oldValue === this.value) {
+        this.validate();
       }
     }
 
@@ -1075,7 +1087,7 @@ export const DatePickerMixin = (subclass) =>
     /** @private */
     _getParsedDate(inputValue = this._inputValue) {
       const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
-      const parsedDate = dateObject && this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
+      const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
       return parsedDate;
     }
 
@@ -1112,7 +1124,7 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     __computeMinOrMaxDate(dateString) {
-      return this._parseDate(dateString);
+      return parseDate(dateString);
     }
 
     /**

package/src/vaadin-date-picker-month-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';