From d00b9fe3c374f8564f2067c642018f44a1f647af Mon Sep 17 00:00:00 2001 From: "andrey.d" Date: Tue, 30 Oct 2018 11:30:14 +0300 Subject: [PATCH 1/4] add `timeFormat` option for supporting 12/24 time format 24 bu default --- package.json | 18 +++++++--- src/Cleave.js | 2 +- src/common/DefaultProperties.js | 1 + src/shortcuts/TimeFormatter.js | 36 ++++++++++++++++---- test/fixtures/time.json | 59 +++++++++++++++++++++++++++++++++ test/unit/TimeFormatter_spec.js | 2 +- 6 files changed, 105 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index b3452c6a..626877fa 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,21 @@ { "name": "cleave.js", "title": "cleave.js", - "description": - "JavaScript library for formatting input text content when you are typing", - "keywords": ["cleave", "javascript", "html", "format", "form", "input"], + "description": "JavaScript library for formatting input text content when you are typing", + "keywords": [ + "cleave", + "javascript", + "html", + "format", + "form", + "input" + ], "version": "1.4.4", - "files": ["src", "dist", "react.js"], + "files": [ + "src", + "dist", + "react.js" + ], "author": { "name": "Max Huang", "url": "http://github.com/nosir", diff --git a/src/Cleave.js b/src/Cleave.js index e386f412..f014814e 100644 --- a/src/Cleave.js +++ b/src/Cleave.js @@ -92,7 +92,7 @@ Cleave.prototype = { return; } - pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern); + pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat); pps.blocks = pps.timeFormatter.getBlocks(); pps.blocksLength = pps.blocks.length; pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); diff --git a/src/common/DefaultProperties.js b/src/common/DefaultProperties.js index 13728fc4..2a93fcd3 100644 --- a/src/common/DefaultProperties.js +++ b/src/common/DefaultProperties.js @@ -26,6 +26,7 @@ var DefaultProperties = { // time target.time = !!opts.time; target.timePattern = opts.timePattern || ['h', 'm', 's']; + target.timeFormat = opts.timeFormat || '24'; target.timeFormatter = {}; // date diff --git a/src/shortcuts/TimeFormatter.js b/src/shortcuts/TimeFormatter.js index 935016bf..7e4e6f76 100644 --- a/src/shortcuts/TimeFormatter.js +++ b/src/shortcuts/TimeFormatter.js @@ -1,11 +1,12 @@ 'use strict'; -var TimeFormatter = function (timePattern) { +var TimeFormatter = function (timePattern, timeFormat) { var owner = this; owner.time = []; owner.blocks = []; owner.timePattern = timePattern; + owner.timeFormat = timeFormat; owner.initBlocks(); }; @@ -30,11 +31,32 @@ TimeFormatter.prototype = { return this.blocks; }, + getTimeFormatOptions() { + var owner = this; + if (owner.timeFormat === '12') { + return { + maxHourFirstDigit: 1, + maxHours: 11, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + } + + return { + maxHourFirstDigit: 2, + maxHours: 23, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + }, + getValidatedTime: function (value) { var owner = this, result = ''; value = value.replace(/[^\d]/g, ''); + var timeFormatOptions = owner.getTimeFormatOptions(); + owner.blocks.forEach(function (length, index) { if (value.length > 0) { var sub = value.slice(0, length), @@ -44,20 +66,20 @@ TimeFormatter.prototype = { switch (owner.timePattern[index]) { case 'h': - if (parseInt(sub0, 10) > 2) { + if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) { sub = '0' + sub0; - } else if (parseInt(sub, 10) > 23) { - sub = '23'; + } else if (parseInt(sub, 10) > timeFormatOptions.maxHours) { + sub = timeFormatOptions.maxHours + ''; } break; case 'm': case 's': - if (parseInt(sub0, 10) > 5) { + if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) { sub = '0' + sub0; - } else if (parseInt(sub, 10) > 60) { - sub = '60'; + } else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) { + sub = timeFormatOptions.maxMinutes + ''; } break; } diff --git a/test/fixtures/time.json b/test/fixtures/time.json index b6495621..342d16dc 100644 --- a/test/fixtures/time.json +++ b/test/fixtures/time.json @@ -100,5 +100,64 @@ "0918" ] ] + }, + { + "timeFormat": "12", + "timePattern": [ + "h", + "m" + ], + "time": [ + [ + "0718", + "0718" + ], + [ + "2018", + "0218" + ], + [ + "0008", + "0008" + ], + [ + "9018", + "0918" + ] + ] + }, + { + "timeFormat": "12", + "timePattern": [ + "h", + "m", + "s" + ], + "time": [ + [ + "0718", + "0718" + ], + [ + "2518", + "0218" + ], + [ + "071899", + "071809" + ], + [ + "232323000", + "022323" + ], + [ + "2323230", + "022323" + ], + [ + "2370700", + "020707" + ] + ] } ] diff --git a/test/unit/TimeFormatter_spec.js b/test/unit/TimeFormatter_spec.js index 43125886..c178d194 100644 --- a/test/unit/TimeFormatter_spec.js +++ b/test/unit/TimeFormatter_spec.js @@ -5,7 +5,7 @@ var timeGroups = require('../fixtures/time.json'); describe('TimeFormatter', function () { _.each(timeGroups, function (timeGroup) { describe('pattern: ' + timeGroup.timePattern.join(', '), function () { - var timeFormatter = new TimeFormatter(timeGroup.timePattern); + var timeFormatter = new TimeFormatter(timeGroup.timePattern, timeGroup.timeFormat); _.each(timeGroup.time, function (time) { it('should convert time ' + time[0] + ' to ' + time[1], function () { From 946118804e90325e392d7cb86d787e0aca52994b Mon Sep 17 00:00:00 2001 From: "andrey.d" Date: Tue, 30 Oct 2018 11:33:16 +0300 Subject: [PATCH 2/4] update doc --- doc/options.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/doc/options.md b/doc/options.md index cb676ae8..f81364a6 100644 --- a/doc/options.md +++ b/doc/options.md @@ -193,6 +193,19 @@ new Cleave('.my-input', { ['s', 'm', 'h']: 37:56:14 ``` +### `timeFormat` + +A `String` value indicates time format. + +**Default value** `"24"` + +```js +new Cleave('.my-input', { + time: true, + timeFormat: "12" +}); +``` + You can also custom the [delimiter](#delimiter) for time ## Numerals From c510f9694bd7e7a0374f69cb7aecb00eb05bd1d1 Mon Sep 17 00:00:00 2001 From: "andrey.d" Date: Tue, 30 Oct 2018 11:54:14 +0300 Subject: [PATCH 3/4] change function declaration --- src/shortcuts/TimeFormatter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shortcuts/TimeFormatter.js b/src/shortcuts/TimeFormatter.js index 7e4e6f76..c04fe9c8 100644 --- a/src/shortcuts/TimeFormatter.js +++ b/src/shortcuts/TimeFormatter.js @@ -31,7 +31,7 @@ TimeFormatter.prototype = { return this.blocks; }, - getTimeFormatOptions() { + getTimeFormatOptions: function () { var owner = this; if (owner.timeFormat === '12') { return { From dc7f5f0a61095dd14026c44062a479d69bda4582 Mon Sep 17 00:00:00 2001 From: "andrey.d" Date: Tue, 30 Oct 2018 12:03:47 +0300 Subject: [PATCH 4/4] pass timeFormat in react initialization --- src/Cleave.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Cleave.react.js b/src/Cleave.react.js index 90ce333f..734dae66 100644 --- a/src/Cleave.react.js +++ b/src/Cleave.react.js @@ -128,7 +128,7 @@ var cleaveReactClass = CreateReactClass({ return; } - pps.timeFormatter = new TimeFormatter(pps.timePattern); + pps.timeFormatter = new TimeFormatter(pps.timePattern, pps.timeFormat); pps.blocks = pps.timeFormatter.getBlocks(); pps.blocksLength = pps.blocks.length; pps.maxLength = Util.getMaxLength(pps.blocks);