[ISSUE-186] Add getISOFormatDate method (nosir#271)

chenyucheng · Nov 9, 2017 · 4c28c7c · 4c28c7c
1 parent 8eb0ba1
commit 4c28c7c
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

diff --git a/dist/cleave-angular.js b/dist/cleave-angular.js
@@ -408,6 +408,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return rawValue;
 	    },
 
+	    getISOFormatDate: function () {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+	    },
+
 	    getFormattedValue: function () {
 	        return this.element.value;
 	    },
@@ -552,6 +559,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	var DateFormatter = function (datePattern) {
 	    var owner = this;
 
+	    owner.date = [];
 	    owner.blocks = [];
 	    owner.datePattern = datePattern;
 	    owner.initBlocks();
@@ -569,6 +577,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    },
 
+	    getISOFormatDate: function () {
+	        var owner = this,
+	            date = owner.date;
+
+	        return date.length === 3 ? (
+	            date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
+	        ) : '';
+	    },
+
 	    getBlocks: function () {
 	        return this.blocks;
 	    },
@@ -661,6 +678,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            date = this.getFixedDate(day, month, year);
 	        }
 
+	        owner.date = date;
+
 	        return date.length === 0 ? value : datePattern.reduce(function (previous, current) {
 	            switch (current) {
 	            case 'd':

diff --git a/dist/cleave-angular.min.js b/dist/cleave-angular.min.js
diff --git a/dist/cleave-react.js b/dist/cleave-react.js
@@ -241,6 +241,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return rawValue;
 	    },
 
+	    getISOFormatDate: function getISOFormatDate() {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+	    },
+
 	    onInit: function onInit(owner) {
 	        return owner;
 	    },
@@ -2005,6 +2012,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	var DateFormatter = function DateFormatter(datePattern) {
 	    var owner = this;
 
+	    owner.date = [];
 	    owner.blocks = [];
 	    owner.datePattern = datePattern;
 	    owner.initBlocks();
@@ -2022,6 +2030,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    },
 
+	    getISOFormatDate: function getISOFormatDate() {
+	        var owner = this,
+	            date = owner.date;
+
+	        return date.length === 3 ? date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0]) : '';
+	    },
+
 	    getBlocks: function getBlocks() {
 	        return this.blocks;
 	    },
@@ -2123,6 +2138,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            date = this.getFixedDate(day, month, year);
 	        }
 
+	        owner.date = date;
+
 	        return date.length === 0 ? value : datePattern.reduce(function (previous, current) {
 	            switch (current) {
 	                case 'd':

diff --git a/dist/cleave-react.min.js b/dist/cleave-react.min.js
diff --git a/dist/cleave.js b/dist/cleave.js
@@ -408,6 +408,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return rawValue;
 	    },
 
+	    getISOFormatDate: function () {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+	    },
+
 	    getFormattedValue: function () {
 	        return this.element.value;
 	    },
@@ -552,6 +559,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	var DateFormatter = function (datePattern) {
 	    var owner = this;
 
+	    owner.date = [];
 	    owner.blocks = [];
 	    owner.datePattern = datePattern;
 	    owner.initBlocks();
@@ -569,6 +577,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    },
 
+	    getISOFormatDate: function () {
+	        var owner = this,
+	            date = owner.date;
+
+	        return date.length === 3 ? (
+	            date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
+	        ) : '';
+	    },
+
 	    getBlocks: function () {
 	        return this.blocks;
 	    },
@@ -661,6 +678,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            date = this.getFixedDate(day, month, year);
 	        }
 
+	        owner.date = date;
+
 	        return date.length === 0 ? value : datePattern.reduce(function (previous, current) {
 	            switch (current) {
 	            case 'd':

diff --git a/dist/cleave.min.js b/dist/cleave.min.js
diff --git a/doc/public-methods.md b/doc/public-methods.md
@@ -5,6 +5,7 @@
 - [getRawValue](#getrawvalue)
 - [setRawValue](#setrawvaluevalue)
 - [getFormattedValue](#getformattedvalue)
+- [getISOFormatDate](#getisoformatdate)
 - [destroy](#destroy)
 - [setPhoneRegionCode](#setphoneregioncoderegioncode)
 
@@ -32,6 +33,14 @@ Gets formatted pretty value, this is same as `DOMInputElement.value`.
 cleave.getFormattedValue();
 ```
 
+### `.getISOFormatDate()`
+
+Gets ISO format date value, this only works for date input type.
+
+```js
+cleave.getISOFormatDate();
+```
+
 ### `.destroy()`
 
 Garbage collection, removes all listeners.

diff --git a/doc/reactjs-component-usage.md b/doc/reactjs-component-usage.md
@@ -230,6 +230,7 @@ While sometimes you might want to set / update the raw value, here is what you c
 
 - Pass `onInit` callback into component, which returns the cleave instance, then store it as a variable or in state.
 - Call `cleave.setRawValue('...')` to update the raw value.
+- Or call `cleave.getISOFormatDate()` to get ISO format date value for date input field.
 - `onChange` event will be triggered, from here you can grab the returned raw / formatted value and update your state.
 
 ```js
@@ -280,7 +281,7 @@ ReactDOM.render(<MyComponent/>, document.getElementById('content'));
 
 ```
 
-[JSFiddle](https://jsfiddle.net/nosir/pkd17gxg/)
+[JSFiddle](https://jsfiddle.net/nosir/k4pom0ap/)
 
 ### How to get ref of the input field
 

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",

diff --git a/src/Cleave.js b/src/Cleave.js
@@ -352,6 +352,13 @@ Cleave.prototype = {
         return rawValue;
     },
 
+    getISOFormatDate: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+    },
+
     getFormattedValue: function () {
         return this.element.value;
     },

diff --git a/src/Cleave.react.js b/src/Cleave.react.js
@@ -183,6 +183,13 @@ var Cleave = CreateReactClass({
         return rawValue;
     },
 
+    getISOFormatDate: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
+    },
+
     onInit: function (owner) {
         return owner;
     },

diff --git a/src/shortcuts/DateFormatter.js b/src/shortcuts/DateFormatter.js
@@ -3,6 +3,7 @@
 var DateFormatter = function (datePattern) {
     var owner = this;
 
+    owner.date = [];
     owner.blocks = [];
     owner.datePattern = datePattern;
     owner.initBlocks();
@@ -20,6 +21,15 @@ DateFormatter.prototype = {
         });
     },
 
+    getISOFormatDate: function () {
+        var owner = this,
+            date = owner.date;
+
+        return date.length === 3 ? (
+            date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
+        ) : '';
+    },
+
     getBlocks: function () {
         return this.blocks;
     },
@@ -112,6 +122,8 @@ DateFormatter.prototype = {
             date = this.getFixedDate(day, month, year);
         }
 
+        owner.date = date;
+
         return date.length === 0 ? value : datePattern.reduce(function (previous, current) {
             switch (current) {
             case 'd':

diff --git a/test/browser/date.js b/test/browser/date.js
@@ -47,3 +47,16 @@ describe('Date input field with pattern', function () {
         assert.equal(field.value, '1965/04/11');
     });
 });
+
+describe('ISO date', function () {
+    var field = document.querySelector('.input-date');
+    var cleave = new Cleave(field, {
+        date:        true,
+        datePattern: ['m', 'Y', 'd']
+    });
+
+    it('should get correct ISO date', function () {
+        cleave.setRawValue('04196511');
+        assert.equal(cleave.getISOFormatDate(), '1965-04-11');
+    });
+});