@vaadin/vaadin-date-picker 4.4.5 → 4.6.0

package/README.md

@@ -97,13 +97,14 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 1. Fork the `vaadin-date-picker` repository and clone it locally.
 
-1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
+2. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) 
+and [Polymer](https://polymer-library.polymer-project.org/) installed.
 
-1. When in the `vaadin-date-picker` directory, run `npm install` and then `bower install` to install dependencies.
+3. When in the `vaadin-date-picker` directory, run `npm install` and then `bower install` to install dependencies.
 
-1. Run `npm start`, browser will automatically open the component API documentation.
+4. Run `npm start`, browser will automatically open the component API documentation.
 
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
+5. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
 
   - http://127.0.0.1:3000/components/vaadin-date-picker/demo
   - http://127.0.0.1:3000/components/vaadin-date-picker/test
@@ -111,8 +112,8 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 ## Running tests from the command line
 
-1. When in the `vaadin-date-picker` directory, run `polymer test`
-
+1. When in the `vaadin-date-picker` directory, run `npm test` (this will execute:"test": "wct")
+   (tests will be fetched from the `test/basics.html` file)
 
 ## Following the coding style
 

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-date-picker",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-date-picker",
-  "version": "4.4.5",
+  "version": "4.6.0",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-text-field": "^2.8.0",
+    "@vaadin/vaadin-text-field": "^2.10.0",
     "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2",
     "@vaadin/vaadin-overlay": "^3.5.0",

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

@@ -37,6 +37,53 @@ export const DatePickerHelper = class VaadinDatePickerHelper {
     return Math.floor((daysSinceFirstOfJanuary) / 7 + 1);
   }
 
+  /**
+   * 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
+   */
+  static _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
+   */
+  static _parseDate(str) {
+    // Parsing with RegExp to ensure correct format
+    var parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
+    if (!parts) {
+      return;
+    }
+
+    var 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;
+  }
+
   /**
    * Check if two dates are equal.
    *

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

@@ -72,8 +72,14 @@ declare class DatePickerLightElement extends
   ThemableMixin(
   DatePickerMixin(
   PolymerElement)) {
+
+  /**
+   * The method is overridden to allow the customization of
+   * the input element value property name, which can be
+   * achieved by providing a custom `attrForValue` property.
+   */
+  readonly _inputElementValueProperty: string;
   _overlayInitialized: boolean;
-  _inputValue: string|undefined;
 
   /**
    * Name of the two-way data-bindable property representing the

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

@@ -130,15 +130,17 @@ class DatePickerLightElement extends
     return this.querySelector('vaadin-text-field,iron-input,paper-input,.paper-input-input,.input');
   }
 
-  set _inputValue(value) {
-    if (this._inputElement) {
-      this._inputElement[dashToCamelCase(this.attrForValue)] = value;
-    }
-  }
-
-  /** @return {string | undefined} */
-  get _inputValue() {
-    return this._inputElement && this._inputElement[dashToCamelCase(this.attrForValue)];
+  /**
+   * The method is overridden to allow the customization of
+   * the input element value property name, which can be
+   * achieved by providing a custom `attrForValue` property.
+   *
+   * @protected
+   * @override
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return dashToCamelCase(this.attrForValue);
   }
 }
 

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

@@ -33,6 +33,18 @@ export {DatePickerMixinConstructor};
 interface DatePickerMixin {
   readonly _inputElement: HTMLElement|null;
 
+  /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   */
+  readonly _inputElementValueProperty: string;
+
+  /**
+   * The input element's value.
+   */
+  _inputElementValue: string;
+
   /**
    * The current selected date.
    */
@@ -141,12 +153,22 @@ interface DatePickerMixin {
    *             // 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.
-   *             formatDate: d => {
-   *               // returns a string representation of the given
-   *               // object in 'MM/DD/YYYY' -format
+   *             formatDate(d) {
+   *               const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
+   *               return [d.month + 1, d.day, yearStr].join('/');
    *             },
    *
    *             // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
@@ -194,6 +216,14 @@ interface DatePickerMixin {
    * The latest date that can be selected. All later dates will be disabled.
    */
   _maxDate: Date|string|null;
+
+  /**
+   * The property indicates true only if the input has been entered by the user.
+   * In the case of programmatic changes, the property is reset to false.
+   * Read more about why this workaround is needed:
+   * https://github.com/vaadin/web-components/issues/5639
+   */
+  _hasInputValue: boolean|null|undefined;
   _overlayInitialized: boolean|null|undefined;
   ready(): void;
   disconnectedCallback(): void;
@@ -209,11 +239,19 @@ interface DatePickerMixin {
   close(): void;
   _onOverlayOpened(): void;
   _onOverlayClosed(): void;
+  _setInvalid(invalid: boolean): void;
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Validates the field and sets the `invalid` property based on the result.
    *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
+   * The method fires a `validated` event with the result of the validation.
+   *
+   * @returns True if the value is valid.
    */
   validate(): boolean;
 
@@ -226,6 +264,11 @@ interface DatePickerMixin {
    */
   checkValidity(): boolean;
   _focus(): void;
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
 }
 
 import {DatePickerI18n} from '../@types/interfaces';

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

@@ -178,12 +178,22 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
             // 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.
-            formatDate: d => {
-              // returns a string representation of the given
-              // object in 'MM/DD/YYYY' -format
+            formatDate(d) {
+              const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
+              return [d.month + 1, d.day, yearStr].join('/');
             },
 
             // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.
@@ -210,8 +220,18 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
         value: () => {
           return {
             monthNames: [
-              'January', 'February', 'March', 'April', 'May',
-              'June', 'July', 'August', 'September', 'October', 'November', 'December'
+              'January',
+              'February',
+              'March',
+              'April',
+              'May',
+              'June',
+              'July',
+              'August',
+              'September',
+              'October',
+              'November',
+              'December',
             ],
             weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
             weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -221,22 +241,24 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
             clear: 'Clear',
             today: 'Today',
             cancel: 'Cancel',
+            referenceDate: '',
             formatDate: d => {
               const yearStr = String(d.year).replace(/\d+/, 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, month = today.getMonth(), 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 ? DatePickerHelper._parseDate(this.referenceDate) : new Date();
+                  year = DatePickerHelper._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]);
@@ -249,10 +271,10 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
               }
             },
             formatTitle: (monthName, fullYear) => {
-              return monthName + ' ' + fullYear;
-            }
+              return `${monthName} ${fullYear}`;
+            },
           };
-        }
+        },
       },
 
       /**
@@ -310,6 +332,20 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
         computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*, opened, autoOpenDisabled)'
       },
 
+      /**
+       * The property indicates true only if the input has been entered by the user.
+       * In the case of programmatic changes, the property is reset to false.
+       * Read more about why this workaround is needed:
+       * https://github.com/vaadin/web-components/issues/5639
+       *
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
       /** @private */
       _ios: {
         type: Boolean,
@@ -375,7 +411,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
       }
     });
     this.addEventListener('keydown', this._onKeydown.bind(this));
-    this.addEventListener('input', this._onUserInput.bind(this));
+    this.addEventListener('input', this.__onUserInput.bind(this));
     this.addEventListener('focus', e => this._noInput && e.target.blur());
     this.addEventListener('blur', e => {
       if (!this.opened) {
@@ -386,7 +422,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           }
         }
 
-        if (this._inputElement.value === '' && this.__dispatchChange) {
+        if (this._inputElementValue === '' && this.__dispatchChange) {
           this.validate();
           this.value = '';
           this.__dispatchChange = false;
@@ -752,7 +788,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
     // Select the parsed input or focused date
     this._ignoreFocusedDateChange = true;
     if (this.i18n.parseDate) {
-      const inputValue = this._inputValue || '';
+      const inputValue = this._inputElementValue || '';
       const parsedDate = this._getParsedDate(inputValue);
 
       if (this._isValidDate(parsedDate)) {
@@ -796,16 +832,80 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return 'value';
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValue() {
+    return this._inputElement ? this._inputElement[this._inputElementValueProperty] : undefined;
+  }
+
+  /**
+   * The setter resets the `_hasInputValue` property
+   * to false when the input element's value is updated programmatically.
+   * In date-picker, `_hasInputValue` is supposed to indicate true only
+   * if the input has been entered by the user.
+   * Read more about why this workaround is needed:
+   * https://github.com/vaadin/web-components/issues/5639
    *
-   * @param {string=} value Value to validate. Optional, defaults to user's input value.
-   * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+   * @protected
+   */
+  set _inputElementValue(value) {
+    if (this._inputElement) {
+      this._inputElement[this._inputElementValueProperty] = value;
+      this._hasInputValue = false;
+    }
+  }
+
+  /**
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
+   *
+   * @return {boolean} True if the value is valid.
    */
   validate() {
-    // Note (Yuriy): Workaround `this._inputValue` is used in order
-    // to avoid breaking change on custom `checkValidity`.
-    // Can be removed with next major.
-    return !(this.invalid = !this.checkValidity(this._inputValue));
+    // Note (Yuriy): this._inputElementValue is passed to checkValidity() as an argument to maintain
+    // backward compatibility in case it's being used in a custom implementation of checkValidity().
+    // The workaround can be removed with the next major.
+    const isValid = this.checkValidity(this._inputElementValue);
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -817,8 +917,8 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
    * @return {boolean} True if the value is valid
    */
   checkValidity() {
-    const inputValid = !this._inputValue ||
-      (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+    const inputValid = !this._inputElementValue ||
+      (this._selectedDate && this._inputElementValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
     const minMaxValid = !this._selectedDate ||
       DatePickerHelper._dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
@@ -835,7 +935,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
       }
     }
 
-    return inputValid && minMaxValid && inputValidity;
+    return !!(inputValid && minMaxValid && inputValidity);
   }
 
   /** @private */
@@ -857,12 +957,12 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   /** @private */
   _focusAndSelect() {
     this._focus();
-    this._setSelectionRange(0, this._inputValue.length);
+    this._setSelectionRange(0, this._inputElementValue.length);
   }
 
   /** @private */
   _applyInputValue(date) {
-    this._inputValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
+    this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
   }
 
   /** @private */
@@ -935,7 +1035,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           }
           this.close();
         } else {
-          if (!isValidDate && this._inputElement.value !== '') {
+          if (!isValidDate && this._inputElementValue !== '') {
             this.validate();
           } else {
             const oldValue = this.value;
@@ -953,7 +1053,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           this._close();
         } else if (this.autoOpenDisabled) {
           // Do not restore selected date if Esc was pressed after clearing input field
-          if (this._inputElement.value === '') {
+          if (this._inputElementValue === '') {
             this._selectedDate = null;
           }
           this._applyInputValue(this._selectedDate);
@@ -980,16 +1080,50 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   }
 
   /** @private */
-  _getParsedDate(inputValue = this._inputValue) {
+  _getParsedDate(inputValue = this._inputElementValue) {
     const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
     const parsedDate = dateObject &&
       this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);
     return parsedDate;
   }
 
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   *
+   * @param {InputEvent} event
+   * @protected
+   */
+  _setHasInputValue(event) {
+    const target = event.composedPath()[0];
+    this._hasInputValue = target.value.length > 0;
+  }
+
+  /**
+   * An input event listener used to update `_hasInputValue` property.
+   * Do not override this method.
+   *
+   * @param {Event} event
+   * @private
+   */
+  __onUserInput(event) {
+    this._setHasInputValue(event);
+    this._onUserInput(event);
+  }
+
+  /**
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
   /** @private */
   _onUserInput(e) {
-    if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {
+    if (!this.opened && this._inputElementValue && !this.autoOpenDisabled) {
       this.open();
     }
     this._userInputValueChanged();
@@ -1004,7 +1138,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
 
   /** @private */
   _userInputValueChanged(value) {
-    if (this._inputValue) {
+    if (this._inputElementValue) {
       const parsedDate = this._getParsedDate();
 
       if (this._isValidDate(parsedDate)) {
@@ -1028,10 +1162,17 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   get _overlayContent() {
     return this.$.overlay.content.querySelector('#overlay-content');
   }
-
   /**
    * Fired when the user commits a value change.
    *
    * @event change
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 };

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

@@ -115,7 +115,6 @@ declare class DatePickerElement extends
    * Set to true to disable this element.
    */
   disabled: boolean;
-  _inputValue: string;
 
   /**
    * Set to true to display the clear icon which clears the input.

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.4.5';
+    return '4.6.0';
   }
 
   static get properties() {
@@ -235,7 +235,7 @@ class DatePickerElement extends
     this._inputElement.addEventListener('change', (e) => {
       // For change event on text-field blur, after the field is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (this._inputElement.value === '' && !e.__fromClearButton) {
+      if (this._inputElementValue === '' && !e.__fromClearButton) {
         this.__dispatchChange = true;
       }
     });
@@ -267,15 +267,6 @@ class DatePickerElement extends
     return this.$.input;
   }
 
-  set _inputValue(value) {
-    this._inputElement.value = value;
-  }
-
-  /** @return {string} */
-  get _inputValue() {
-    return this._inputElement.value;
-  }
-
   /** @private */
   _getAriaExpanded(opened) {
     return Boolean(opened).toString();