fix(pf3): date-time picker input format.

data-driven-forms · Nov 11, 2019 · e0e8bc3 · e0e8bc3
1 parent dbf13fb
commit e0e8bc3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js b/packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js
@@ -117,6 +117,7 @@ export class DateTimePicker extends React.Component {
       isDisabled,
       disabledDays,
       isClearable,
+      inputFormat,
     } = this.props;
     const value = this.createDate();
     const inputPlaceholder = getPlaceholder(variant, placeholder);
@@ -132,6 +133,7 @@ export class DateTimePicker extends React.Component {
           isDisabled={ isDisabled }
           isClearable={ isClearable }
           clearValue={ this.clearValue }
+          inputFormat={ inputFormat }
         />
         <Overlay
           show={ isOpen }
@@ -176,7 +178,7 @@ DateTimePicker.propTypes = {
   closeOnDaySelect: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   isClearable: PropTypes.bool,
-  pristine: PropTypes.bool,
+  inputFormat: PropTypes.string,
 };
 
 DateTimePicker.defaultProps = {

diff --git a/packages/pf3-component-mapper/src/form-fields/date-time-picker/picker-input.js b/packages/pf3-component-mapper/src/form-fields/date-time-picker/picker-input.js
@@ -4,12 +4,12 @@ import { FormControl, Icon, Form } from 'patternfly-react';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import './date-picker-styles.scss';
 
-const PickerInput = ({ variant, selectedDay, locale, handleOverlayToggle, isDisabled, isClearable, clearValue, ...props }) =>(
+const PickerInput = ({ variant, selectedDay, locale, handleOverlayToggle, isDisabled, isClearable, clearValue, inputFormat, ...props }) =>(
   <Form.InputGroup style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }} disabled={ isDisabled }>
     <FormControl
       readOnly={ true }
       { ...props }
-      value={ selectedDay ? MomentLocaleUtils.formatDate(selectedDay, variant === 'date-time' ? 'LLL' : 'L', locale) : '' }
+      value={ selectedDay ? MomentLocaleUtils.formatDate(selectedDay, inputFormat || variant === 'date-time' ? 'LLL' : 'L', locale) : '' }
       type="text"
       style={{
         cursor: isDisabled ? 'not-allowed' : 'pointer',
@@ -39,6 +39,7 @@ PickerInput.propTypes = {
   isDisabled: PropTypes.bool,
   isClearable: PropTypes.bool,
   clearValue: PropTypes.func.isRequired,
+  inputFormat: PropTypes.string,
 };
 
 export default PickerInput;
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/component-api.md b/packages/react-renderer-demo/src/app/pages/renderer/component-api.md
@@ -127,6 +127,7 @@ This component is using [react-day-picker](https://react-day-picker.js.org/docs/
 |isDisabled|bool|disable component|
 |disabledDays|array|Mark specific days or a range of days as disabled. [More info](https://react-day-picker.js.org/examples/disabled). In order to store this prop to JSON we allow using string. Any string accepted by Date constructor is valid value. There is an alias for current date: `today`|
 |closeOnDaySelect|bool|Close the calendar popover after selecting date.|
+|inputFormat|string|Set date format for the input. [Using same convetion as moment.js](https://devhints.io/moment)|
 
 <ExampleLink to='date-picker' />