Date formating on focus change only

examples/examples.js

@@ -38,6 +38,8 @@ class Example extends React.Component {
           <div className='ui input'>
             <DatePickerInput
               disabled={this.state.disabled}
+              format={['YYYYMMDD', 'YYYY-MM-DD', 'YYMMDD', 'YY-MM-DD']}
+              formatOnBlurOnly
               displayFormat='DD/MM/YYYY'
               returnFormat='YYYY-MM-DD'
               className='my-react-component'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-datepicker",
-  "version": "5.0.13",
+  "version": "5.0.14",
   "description": "DatePicker and DatePickerInput to be used with React",
   "main": "index.js",
   "files": [

src/DatePickerInput.js

@@ -31,9 +31,10 @@ export const Props = {
   startMode: t.maybe(t.enums.of(['day', 'month', 'year'])),
   startDate: t.maybe(Value),
   fixedMode: t.maybe(t.Boolean),
+  formatOnBlurOnly: t.maybe(t.Boolean),
   displayFormat: t.maybe(t.String),
   returnFormat: t.maybe(t.String),
-  format: t.maybe(t.String),
+  format: t.maybe(t.Array),
   validationFormat: t.maybe(t.String),
   showOnInputClick: t.maybe(t.Boolean),
   closeOnClickOutside: t.maybe(t.Boolean),
@@ -63,6 +64,7 @@ export const Props = {
  * @param startMode - the start view of the datepicker
  * @param startDate - specify an initial "visible" date with no need to select a defaultValue
  * @param fixedMode - whether the user can use multiple views or not
+ * @param formatOnBlurOnly - format input value with MomentJS only when focus is changed
  * @param displayFormat - MomentJS format used to display current date
  * @param returnFormat - MomentJS format used to format date before returing through "onChange"
  * @param format - MomentJS format used to format date before returing through "onChange"
@@ -213,13 +215,24 @@ export default class DatePickerInput extends React.Component {
   }
 
   onChangeInput = ({ target: { value: dateString } }) => {
+    this.handleChangeInput(dateString, !this.props.formatOnBlurOnly);
+  }
+
+  onBlur = ({ target: { value: dateString } }) => {
+    if (this.props.formatOnBlurOnly) {
+      this.handleChangeInput(dateString, true);
+    }
+  }
+
+  handleChangeInput = (dateString, formatReturnDate) => {
     if (dateString || this.state.date) {
       const parsedDate = this.parseInputDateString(dateString);
       const date = parsedDate.isValid() ? parsedDate : this.state.date;
-
       const jsDate = parsedDate.isValid() ? parsedDate.toDate() : INVALID;
-      const returnedDateString = jsDate ? this.formatReturnedDate(parsedDate) : INVALID;
-
+      let returnedDateString = INVALID;
+      if (formatReturnDate) {
+        returnedDateString = parsedDate.isValid() ? this.formatReturnedDate(parsedDate) : INVALID;
+      }
       this.setState({
         dateString,
         date,
@@ -268,6 +281,7 @@ export default class DatePickerInput extends React.Component {
         onInputClick, onButtonClick, onInputClear,
         onInputChange: this.onChangeInput,
         onInputKeyUp: this.hideOnEnterKey,
+        onInputBlur: this.onBlur,
         ...inputProps
       },
       datePickerProps: active && {

src/Input.js

@@ -19,7 +19,8 @@ import pure from './utils/pure';
   onButtonClick: t.maybe(t.Function),
   onInputClick: t.maybe(t.Function),
   onInputClear: t.maybe(t.Function),
-  onInputKeyUp: t.Function
+  onInputKeyUp: t.Function,
+  onInputBlur: t.maybe(t.Function)
 }, { strict: false })
 export default class Input extends React.Component {
 
@@ -36,6 +37,7 @@ export default class Input extends React.Component {
       onInputChange,
       onInputClear,
       onInputKeyUp,
+      onInputBlur,
       ...inputProps
     } = props;
 
@@ -57,6 +59,7 @@ export default class Input extends React.Component {
         onChange: onInputChange,
         onClick: onInputClick,
         onKeyUp: onInputKeyUp,
+        onBlur: onInputBlur,
         ...inputProps
       }
     };

src/utils/format.js

@@ -40,11 +40,12 @@ export default function format(Component) {
   };
 
   Component.prototype.parseInputDateString = function(dateString, props) {
-    const format = this.getDisplayFormat(props);
-    if (!format) {
+    const { format } = (props || this.props);
+    const parseFormat = format ? format : this.getDisplayFormat(props);
+    if (!parseFormat) {
       return moment(dateString);
     } else {
-      return moment(dateString, format, true);
+      return moment(dateString, parseFormat, true);
     }
   };