DateTimePicker - Adding props for date and time formats (#620)

* Adding date and time formats to control input text formats display

* get props from themeProps

Author: Inbal-Tish

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -12,12 +12,14 @@ export default class DateTimePickerScreen extends Component {
         <DateTimePicker 
           title={'Date'} 
           placeholder={'Select a date'} 
+          dateFormat={'MMM D, YYYY'}
           // value={new Date('October 13, 2014')} 
         />
         <DateTimePicker 
           mode={'time'} 
           title={'Time'} 
           placeholder={'Select time'}
+          timeFormat={'h:mm A'}
           // value={new Date('2015-03-25T12:00:00-06:30')}
         />
       </View>

package.json

@@ -45,6 +45,7 @@
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.0.0",
     "memoize-one": "^5.0.5",
+    "moment": "^2.24.0",
     "prop-types": "^15.5.10",
     "react-native-animatable": "^1.1.0",
     "react-native-color": "0.0.10",

src/components/dateTimePicker/index.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import moment from 'moment';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import RNDateTimePicker from '@react-native-community/datetimepicker';
@@ -52,7 +53,15 @@ class DateTimePicker extends BaseComponent {
     /**
      * The maximum date or time value to use
      */
-    maximumDate: PropTypes.instanceOf(Date)
+    maximumDate: PropTypes.instanceOf(Date),
+    /**
+     * The date format for the text display
+     */
+    dateFormat: PropTypes.string,
+    /**
+     * The time format for the text display
+     */
+    timeFormat: PropTypes.string
   }
 
   static defaultProps = {
@@ -158,7 +167,6 @@ class DateTimePicker extends BaseComponent {
           onChange={this.setDate} 
           minimumDate={minimumDate}
           maximumDate={maximumDate}
-          is24Hour // Android only
         />
       );
     }
@@ -170,10 +178,12 @@ class DateTimePicker extends BaseComponent {
 
   render() {
     const {chosenDate} = this.state;
-    const {mode} = this.props;
+    const {mode, dateFormat, timeFormat} = this.getThemeProps();
     const textInputProps = TextField.extractOwnProps(this.getThemeProps());
-    const dateString = mode === MODES.DATE ? chosenDate.toLocaleDateString() : chosenDate.toLocaleTimeString();
-
+    const dateString = mode === MODES.DATE ? 
+      (dateFormat ? moment(chosenDate).format(dateFormat) : chosenDate.toLocaleDateString()) : 
+      (timeFormat ? moment(chosenDate).format(timeFormat) : chosenDate.toLocaleTimeString());
+    
     return (
       <TextField 
         {...textInputProps}