a fix to selecting expiry date with 1|2/1|2 and typing

src/expiry_date_formatter.js

@@ -47,11 +47,29 @@ class ExpiryDateFormatter extends DelimitedTextFormatter {
    */
   format(value) {
     if (!value) { return ''; }
+    if (typeof value === 'string') {
+      let [month = '', year = ''] = value.split(this.delimiter);
 
-    let {month, year} = value;
-    year = year % 100;
+      if (month.length > 2) {
+        year = typeof year === 'undefined' ? month.slice(2) :
+          month.slice(2) + year;
+        month = month.slice(0,2);
+      }
+
+      // If it looks like a valid 4 digit year
+      if (year.length === 4 && /^(19|20)\d{2}$/.test(year)) {
+        year = year.slice(2);
+      } else if (year.length > 2) {
+        year = year.slice(0,2);
+      }
+
+      return super.format(zpad2(month) + year);
+    } else {
+      let {month, year} = value;
+      year = year % 100;
 
-    return super.format(zpad2(month) + zpad2(year));
+      return super.format(zpad2(month) + zpad2(year));
+    }
   }
 
   /**
@@ -104,10 +122,6 @@ class ExpiryDateFormatter extends DelimitedTextFormatter {
         if (newText === '0') {
           newText = '';
         }
-        if (change.inserted.text.length > 0 && !/^\d$/.test(change.inserted.text)) {
-          error('expiry-date-formatter.only-digits-allowed');
-          return false;
-        }
       }
 
       // 4| -> 04|
@@ -116,7 +130,7 @@ class ExpiryDateFormatter extends DelimitedTextFormatter {
       }
 
       // 15| -> 1|
-      if (/^1[3-9]$/.test(newText)) {
+      if (/^1[3-9].*$/.test(newText)) {
         error('expiry-date-formatter.invalid-month');
         return false;
       }
@@ -132,6 +146,12 @@ class ExpiryDateFormatter extends DelimitedTextFormatter {
         newText += this.delimiter;
       }
 
+      // 103 -> 10/3
+      if (newText.length > 2 && !new RegExp('^\\d\\d' + this.delimiter + '(\\d)*').test(newText)) {
+        newText = newText.replace(this.delimiter, '');
+        newText = this.format(newText);
+      }
+
       const match = newText.match(/^(\d\d)(.)(\d\d?).*$/);
       if (match && match[2] === this.delimiter) {
         newText = match[1] + this.delimiter + match[3];

test/selenium/expiry_date_formatter_test.js

@@ -185,6 +185,36 @@ module.exports = function(ua) {
               });
           });
       });
+
+      test.it('part selecting and typing a nonvalid month', function() {
+        helpers.setInput('12/12', input);
+        var element = 'window.testField.element';
+
+        return driver.executeScript(element + '.selectionStart = 1; ' + element + '.selectionEnd = 4;')
+          .then(function() {
+            input.sendKeys('444');
+
+            return helpers.getFieldKitValues()
+              .then(function(values) {
+                expect(values.raw).to.equal('12/12');
+              });
+          });
+      });
+
+      test.it('part selecting and typing a valid month', function() {
+        helpers.setInput('12/12', input);
+        var element = 'window.testField.element';
+
+        return driver.executeScript(element + '.selectionStart = 1; ' + element + '.selectionEnd = 4;')
+          .then(function() {
+            input.sendKeys('0');
+
+            return helpers.getFieldKitValues()
+              .then(function(values) {
+                expect(values.raw).to.equal('10/2');
+              });
+          });
+      });
     }
   });
 };

test/unit/expiry_date_formatter_test.js

@@ -71,6 +71,52 @@ testsWithAllKeyboards('FieldKit.ExpiryDateFormatter', function() {
     expect(textFieldDidFailToParseString.firstCall.args).to.eql([field, 'abc', 'expiry-date-formatter.invalid-date']);
   });
 
+  describe('#format', function() {
+    describe('formats object into string date', function() {
+      it('with one digit month', function() {
+        expect(formatter.format({month: 9, year: 1999})).to.eql('09/99');
+      });
+
+      it('with two digit month', function() {
+        expect(formatter.format({month: 11, year: 1999})).to.eql('11/99');
+      });
+
+      it('with two digit year', function() {
+        expect(formatter.format({month: 9, year: 99})).to.eql('09/99');
+      });
+
+      it('with one digit year', function() {
+        expect(formatter.format({month: 9, year: 9})).to.eql('09/09');
+      });
+    });
+
+    describe('formats string into string date', function() {
+      it('with one digit month', function() {
+        expect(formatter.format('9/99')).to.eql('09/99');
+      });
+
+      it('with two digit month', function() {
+        expect(formatter.format('11/99')).to.eql('11/99');
+      });
+
+      it('with three digit month', function() {
+        expect(formatter.format('119/9')).to.eql('11/99');
+      });
+
+      it('with no delimiter', function() {
+        expect(formatter.format('1199')).to.eql('11/99');
+      });
+
+      it('with no year', function() {
+        expect(formatter.format('11')).to.eql('11/');
+      });
+
+      it('with four digit year', function() {
+        expect(formatter.format('11/2018')).to.eql('11/18');
+      });
+    });
+  });
+
   describe('#parse', function() {
     var clock;