Add support for datetime fields (date and time in same field)

README.md

@@ -12,7 +12,7 @@ Cleave.js has a simple purpose: to help you format input text content automatica
 
 - Credit card number formatting
 - Phone number formatting (i18n js lib separated for each country to reduce size)
-- Date formatting
+- Date and time formatting
 - Numeral formatting
 - Custom delimiter, prefix and blocks pattern
 - CommonJS / AMD mode

dist/cleave-angular.js

@@ -185,7 +185,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat);
-	        pps.blocks = pps.timeFormatter.getBlocks();
+
+	        var timeFormatterBlocks = pps.timeFormatter.getBlocks();
+	        if(!pps.date) {
+	            pps.blocks = timeFormatterBlocks;
+	        }
+	        else {
+	            pps.blocks = pps.blocks.concat(timeFormatterBlocks);
+	        }
+
 	        pps.blocksLength = pps.blocks.length;
 	        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
 	    },
@@ -336,13 +344,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	            return;
 	        }
 
-	        // date
-	        if (pps.date) {
+	        // date and time
+	        if(pps.date && pps.time) {
+	            value = Util.getDateTimeValue(value, pps.dateFormatter, pps.timeFormatter, pps.delimiters);
+	        }
+	        else if (pps.date) { // only date
 	            value = pps.dateFormatter.getValidatedDate(value);
 	        }
-
-	        // time
-	        if (pps.time) {
+	        else if (pps.time) { // only time
 	            value = pps.timeFormatter.getValidatedTime(value);
 	        }
 
@@ -522,6 +531,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return pps.time ? pps.timeFormatter.getISOFormatTime() : '';
 	    },
 
+	    getISOFormatDateTime: function () {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        if(pps.date && pps.time) {
+	            var formattedDateTime = '';
+
+	            var date = owner.getISOFormatDate();
+	            var time = owner.getISOFormatTime();
+
+	            if(date)
+	                formattedDateTime += date;
+
+	            if(time)
+	                formattedDateTime += 'T' + time;
+
+	            return formattedDateTime;
+	        }
+
+	        return '';
+	    },
+
 	    getFormattedValue: function () {
 	        return this.element.value;
 	    },
@@ -797,6 +828,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return this.blocks;
 	    },
 
+	    getMaxStringLength: function () {
+	        return this.getBlocks().reduce(function(a, b) {
+	            return a + b;
+	        }, 0);
+	    },
+
 	    getValidatedDate: function (value) {
 	        var owner = this, result = '';
 
@@ -1420,6 +1457,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return value;
 	    },
 
+	    getDateTimeValue: function (value, dateFormatter, timeFormatter, delimiters) {
+
+	        var splitDelimiterIndex = dateFormatter.getBlocks().length - 1;
+	        var splitDelimiter = delimiters[splitDelimiterIndex];
+
+	        var dateMaxStringLength = dateFormatter.getMaxStringLength();
+
+	        var splittedValues = value.split(splitDelimiter);
+
+	        // Split even if it is raw value
+	        if(splittedValues.length == 1 && value.length > dateMaxStringLength) {
+	            splittedValues = [
+	                value.substring(0, dateMaxStringLength),
+	                value.substring(dateMaxStringLength)
+	            ];
+	        }
+
+	        var dateValue = splittedValues[0] ? dateFormatter.getValidatedDate(splittedValues[0]) : '';
+	        var timeValue = splittedValues[1] ? timeFormatter.getValidatedTime(splittedValues[1]) : '';
+
+	        if(timeValue)
+	            value = dateValue + timeValue;
+	        else
+	            value = dateValue;
+
+	        return value;
+	    },
+
 	    headStr: function (str, length) {
 	        return str.slice(0, length);
 	    },
@@ -1631,6 +1696,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Separate this, so react module can share the usage
 	 */
 	var DefaultProperties = {
+
+	    getDelimitersFromPattern: function(patternArray, delimiterToInsert) {
+	        return patternArray.flatMap(function(value, index) {
+	            if(index == 0)
+	                return [];
+
+	            return delimiterToInsert;
+	        });
+	    },
+
+
 	    // Maybe change to object-assign
 	    // for now just keep it as simple
 	    assign: function (target, opts) {
@@ -1697,7 +1773,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	                                ' '))));
 	        target.delimiterLength = target.delimiter.length;
 	        target.delimiterLazyShow = !!opts.delimiterLazyShow;
-	        target.delimiters = opts.delimiters || [];
+
+	        target.delimiters = opts.delimiters ? opts.delimiters :
+	            (target.date === true && target.time === true) ? [
+	                    this.getDelimitersFromPattern(target.datePattern, '/'),
+	                    ' ',
+	                    this.getDelimitersFromPattern(target.timePattern, ':')
+	                ].flat() :
+	                    [];
 
 	        target.blocks = opts.blocks || [];
 	        target.blocksLength = target.blocks.length;

dist/cleave-esm.js

@@ -170,6 +170,12 @@ DateFormatter.prototype = {
         return this.blocks;
     },
 
+    getMaxStringLength: function () {
+        return this.getBlocks().reduce(function(a, b) {
+            return a + b;
+        }, 0);
+    },
+
     getValidatedDate: function (value) {
         var owner = this, result = '';
 
@@ -765,6 +771,34 @@ var Util = {
         return value;
     },
 
+    getDateTimeValue: function (value, dateFormatter, timeFormatter, delimiters) {
+
+        var splitDelimiterIndex = dateFormatter.getBlocks().length - 1;
+        var splitDelimiter = delimiters[splitDelimiterIndex];
+
+        var dateMaxStringLength = dateFormatter.getMaxStringLength();
+
+        var splittedValues = value.split(splitDelimiter);
+
+        // Split even if it is raw value
+        if(splittedValues.length == 1 && value.length > dateMaxStringLength) {
+            splittedValues = [
+                value.substring(0, dateMaxStringLength),
+                value.substring(dateMaxStringLength)
+            ];
+        }
+
+        var dateValue = splittedValues[0] ? dateFormatter.getValidatedDate(splittedValues[0]) : '';
+        var timeValue = splittedValues[1] ? timeFormatter.getValidatedTime(splittedValues[1]) : '';
+
+        if(timeValue)
+            value = dateValue + timeValue;
+        else
+            value = dateValue;
+
+        return value;
+    },
+
     headStr: function (str, length) {
         return str.slice(0, length);
     },
@@ -969,6 +1003,17 @@ var Util_1 = Util;
  * Separate this, so react module can share the usage
  */
 var DefaultProperties = {
+
+    getDelimitersFromPattern: function(patternArray, delimiterToInsert) {
+        return patternArray.flatMap(function(value, index) {
+            if(index == 0)
+                return [];
+
+            return delimiterToInsert;
+        });
+    },
+
+
     // Maybe change to object-assign
     // for now just keep it as simple
     assign: function (target, opts) {
@@ -1035,7 +1080,14 @@ var DefaultProperties = {
                                 ' '))));
         target.delimiterLength = target.delimiter.length;
         target.delimiterLazyShow = !!opts.delimiterLazyShow;
-        target.delimiters = opts.delimiters || [];
+
+        target.delimiters = opts.delimiters ? opts.delimiters :
+            (target.date === true && target.time === true) ? [
+                    this.getDelimitersFromPattern(target.datePattern, '/'),
+                    ' ',
+                    this.getDelimitersFromPattern(target.timePattern, ':')
+                ].flat() :
+                    [];
 
         target.blocks = opts.blocks || [];
         target.blocksLength = target.blocks.length;
@@ -1185,7 +1237,15 @@ Cleave.prototype = {
         }
 
         pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat);
-        pps.blocks = pps.timeFormatter.getBlocks();
+
+        var timeFormatterBlocks = pps.timeFormatter.getBlocks();
+        if(!pps.date) {
+            pps.blocks = timeFormatterBlocks;
+        }
+        else {
+            pps.blocks = pps.blocks.concat(timeFormatterBlocks);
+        }
+
         pps.blocksLength = pps.blocks.length;
         pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
     },
@@ -1336,13 +1396,14 @@ Cleave.prototype = {
             return;
         }
 
-        // date
-        if (pps.date) {
+        // date and time
+        if(pps.date && pps.time) {
+            value = Util.getDateTimeValue(value, pps.dateFormatter, pps.timeFormatter, pps.delimiters);
+        }
+        else if (pps.date) { // only date
             value = pps.dateFormatter.getValidatedDate(value);
         }
-
-        // time
-        if (pps.time) {
+        else if (pps.time) { // only time
             value = pps.timeFormatter.getValidatedTime(value);
         }
 
@@ -1522,6 +1583,28 @@ Cleave.prototype = {
         return pps.time ? pps.timeFormatter.getISOFormatTime() : '';
     },
 
+    getISOFormatDateTime: function () {
+        var owner = this,
+            pps = owner.properties;
+
+        if(pps.date && pps.time) {
+            var formattedDateTime = '';
+
+            var date = owner.getISOFormatDate();
+            var time = owner.getISOFormatTime();
+
+            if(date)
+                formattedDateTime += date;
+
+            if(time)
+                formattedDateTime += 'T' + time;
+
+            return formattedDateTime;
+        }
+
+        return '';
+    },
+
     getFormattedValue: function () {
         return this.element.value;
     },