@vaadin/vaadin-date-picker 4.4.4 → 4.5.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.4",
+  "version": "4.5.0",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.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-mixin.d.ts

@@ -141,12 +141,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: ... }`.

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}`;
+            },
           };
-        }
+        },
       },
 
       /**
@@ -1004,7 +1026,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
 
   /** @private */
   _userInputValueChanged(value) {
-    if (this.opened && this._inputValue) {
+    if (this._inputValue) {
       const parsedDate = this._getParsedDate();
 
       if (this._isValidDate(parsedDate)) {
@@ -1028,7 +1050,6 @@ 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.
    *

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.4.4';
+    return '4.5.0';
   }
 
   static get properties() {