From b98dcea6066bc7314c82d24a801965dfeea495fe Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Thu, 15 Dec 2016 17:28:42 +0200 Subject: [PATCH 1/2] Handle single D and M in formats (1-2 digits) --- lib/index.js | 23 +++++++++++++++-------- src/index.jsx | 26 ++++++++++++++++++-------- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/lib/index.js b/lib/index.js index 04f36fc..9512c9a 100644 --- a/lib/index.js +++ b/lib/index.js @@ -381,13 +381,19 @@ exports.default = _react2.default.createClass({ return (month > 9 ? month : '0' + month) + separator + (day > 9 ? day : '0' + day) + separator + date.getFullYear(); } else if (this.props.dateFormat.match(/DD.MM.YYYY/)) { return (day > 9 ? day : '0' + day) + separator + (month > 9 ? month : '0' + month) + separator + date.getFullYear(); - } else { + } else if (this.props.dateFormat.match(/YYYY.MM.DD/)) { return date.getFullYear() + separator + (month > 9 ? month : '0' + month) + separator + (day > 9 ? day : '0' + day); + } else if (this.props.dateFormat.match(/M.D.YYYY/)) { + return month + separator + day + separator + date.getFullYear(); + } else if (this.props.dateFormat.match(/D.M.YYYY/)) { + return day + separator + month + separator + date.getFullYear(); + } else { + return date.getFullYear() + separator + month + separator + day; } }, handleBadInput: function handleBadInput(originalValue) { var parts = originalValue.replace(new RegExp('[^0-9' + this.state.separator + ']'), '').split(this.state.separator); - if (this.props.dateFormat.match(/MM.DD.YYYY/) || this.props.dateFormat.match(/DD.MM.YYYY/)) { + if (this.props.dateFormat.match(/MM?.DD?.YYYY/) || this.props.dateFormat.match(/DD?.MM?.YYYY/)) { if (parts[0] && parts[0].length > 2) { parts[1] = parts[0].slice(2) + (parts[1] || ''); parts[0] = parts[0].slice(0, 2); @@ -424,16 +430,16 @@ exports.default = _react2.default.createClass({ var month = void 0, day = void 0, year = void 0; - if (this.props.dateFormat.match(/MM.DD.YYYY/)) { - if (!inputValue.match(/[0-1][0-9].[0-3][0-9].[1-2][0-9][0-9][0-9]/)) { + if (this.props.dateFormat.match(/MM?.DD?.YYYY/)) { + if (!inputValue.match(/[0-1][0-9]?.[0-3][0-9]?.[1-2][0-9][0-9][0-9]/)) { return this.handleBadInput(originalValue); } month = inputValue.slice(0, 2).replace(/[^0-9]/g, ''); day = inputValue.slice(3, 5).replace(/[^0-9]/g, ''); year = inputValue.slice(6, 10).replace(/[^0-9]/g, ''); - } else if (this.props.dateFormat.match(/DD.MM.YYYY/)) { - if (!inputValue.match(/[0-3][0-9].[0-1][0-9].[1-2][0-9][0-9][0-9]/)) { + } else if (this.props.dateFormat.match(/DD?.MM?.YYYY/)) { + if (!inputValue.match(/[0-3][0-9]?.[0-1][0-9]?.[1-2][0-9][0-9][0-9]/)) { return this.handleBadInput(originalValue); } @@ -441,13 +447,14 @@ exports.default = _react2.default.createClass({ month = inputValue.slice(3, 5).replace(/[^0-9]/g, ''); year = inputValue.slice(6, 10).replace(/[^0-9]/g, ''); } else { - if (!inputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9].[0-3][0-9]/)) { + if (!inputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9]?.[0-3][0-9]?/)) { return this.handleBadInput(originalValue); } year = inputValue.slice(0, 4).replace(/[^0-9]/g, ''); month = inputValue.slice(5, 7).replace(/[^0-9]/g, ''); - day = inputValue.slice(8, 10).replace(/[^0-9]/g, ''); + day = inputValue.slice(7).replace(/[^0-9]/g, ''); + console.log(inputValue, year, month, day); } var monthInteger = parseInt(month, 10); diff --git a/src/index.jsx b/src/index.jsx index 540f1a8..ffaedd6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -361,14 +361,23 @@ export default React.createClass({ else if (this.props.dateFormat.match(/DD.MM.YYYY/)) { return (day > 9 ? day : `0${day}`) + separator + (month > 9 ? month : `0${month}`) + separator + date.getFullYear(); } - else { + else if (this.props.dateFormat.match(/YYYY.MM.DD/)) { return date.getFullYear() + separator + (month > 9 ? month : `0${month}`) + separator + (day > 9 ? day : `0${day}`); } + else if (this.props.dateFormat.match(/M.D.YYYY/)) { + return month + separator + day + separator + date.getFullYear(); + } + else if (this.props.dateFormat.match(/D.M.YYYY/)) { + return day + separator + month + separator + date.getFullYear(); + } + else { + return date.getFullYear() + separator + month + separator + day; + } }, handleBadInput(originalValue) { const parts = originalValue.replace(new RegExp(`[^0-9${this.state.separator}]`), '').split(this.state.separator); - if (this.props.dateFormat.match(/MM.DD.YYYY/) || this.props.dateFormat.match(/DD.MM.YYYY/)) { + if (this.props.dateFormat.match(/MM?.DD?.YYYY/) || this.props.dateFormat.match(/DD?.MM?.YYYY/)) { if (parts[0] && parts[0].length > 2) { parts[1] = parts[0].slice(2) + (parts[1] || ''); parts[0] = parts[0].slice(0, 2); @@ -404,16 +413,16 @@ export default React.createClass({ const inputValue = originalValue.replace(/(-|\/\/)/g, this.state.separator).slice(0,10); let month, day, year; - if (this.props.dateFormat.match(/MM.DD.YYYY/)) { - if (!inputValue.match(/[0-1][0-9].[0-3][0-9].[1-2][0-9][0-9][0-9]/)) { + if (this.props.dateFormat.match(/MM?.DD?.YYYY/)) { + if (!inputValue.match(/[0-1][0-9]?.[0-3][0-9]?.[1-2][0-9][0-9][0-9]/)) { return this.handleBadInput(originalValue); } month = inputValue.slice(0,2).replace(/[^0-9]/g, ''); day = inputValue.slice(3,5).replace(/[^0-9]/g, ''); year = inputValue.slice(6,10).replace(/[^0-9]/g, ''); - } else if (this.props.dateFormat.match(/DD.MM.YYYY/)) { - if (!inputValue.match(/[0-3][0-9].[0-1][0-9].[1-2][0-9][0-9][0-9]/)) { + } else if (this.props.dateFormat.match(/DD?.MM?.YYYY/)) { + if (!inputValue.match(/[0-3][0-9]?.[0-1][0-9]?.[1-2][0-9][0-9][0-9]/)) { return this.handleBadInput(originalValue); } @@ -421,13 +430,14 @@ export default React.createClass({ month = inputValue.slice(3,5).replace(/[^0-9]/g, ''); year = inputValue.slice(6,10).replace(/[^0-9]/g, ''); } else { - if (!inputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9].[0-3][0-9]/)) { + if (!inputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9]?.[0-3][0-9]?/)) { return this.handleBadInput(originalValue); } year = inputValue.slice(0,4).replace(/[^0-9]/g, ''); month = inputValue.slice(5,7).replace(/[^0-9]/g, ''); - day = inputValue.slice(8,10).replace(/[^0-9]/g, ''); + day = inputValue.slice(7).replace(/[^0-9]/g, ''); + console.log(inputValue, year, month, day); } const monthInteger = parseInt(month, 10); From a6313c0e94d59e1fd44c68e0d1b444de7b888f76 Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Thu, 15 Dec 2016 17:32:32 +0200 Subject: [PATCH 2/2] Edit example and README to mention new formats --- README.md | 4 ++-- example/app.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b78a8bd..ccdfe92 100755 --- a/README.md +++ b/README.md @@ -126,10 +126,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo * **Callback Arguments:** * `event` - Blur event. * **Type:** `Event` - * `dateFormat` - Date format. Any combination of DD, MM, YYYY and separator. + * `dateFormat` - Date format. One of DD-MM-YYYY, MM-DD-YYYY or YYYY-MM-DD where - can be any separator. Alternatively DD and MM can be replaced with D and M for no zero prepending. * **Optional** * **Type:** `string` - * **Examples:** `"MM/DD/YYYY"`, `"YYYY/MM/DD"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"` + * **Examples:** `"MM/DD/YYYY"`, `"YYYY/M/D"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"` * `clearButtonElement` - Character or component to use for the clear button. * **Optional** * **Type:** `string` or `ReactClass` diff --git a/example/app.jsx b/example/app.jsx index 36e0d9e..3e322c5 100755 --- a/example/app.jsx +++ b/example/app.jsx @@ -147,8 +147,8 @@ const App = React.createClass({ - YYYY/MM/DD - + YYYY/M/D + Help