Add DatePicker component

android/app/src/main/res/values/colors.xml

@@ -1,3 +1,6 @@
 <resources>
     <color name="bootsplash_background">#FFFFFF</color>
+    <color name="accent">#0185ff</color>
+    <color name="dark">#0b1b34</color>
+    <color name="gray4">#7D8B8F</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -3,14 +3,13 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#000000</item>
-        <!-- colors.gray4 -->
-        <item name="android:colorEdgeEffect">#7D8B8F</item>
+        <item name="android:textColor">@color/dark</item>
+        <item name="android:colorEdgeEffect">@color/gray4</item>
+        <item name="colorAccent">@color/accent</item>
     </style>
 
     <style name="BootTheme" parent="AppTheme">
         <!-- set the generated bootsplash.xml drawable as activity background -->
         <item name="android:background">@drawable/bootsplash</item>
     </style>
-
 </resources>

ios/Podfile.lock

@@ -509,6 +509,8 @@ PODS:
     - React-Core
   - RNCPicker (1.9.11):
     - React-Core
+  - RNDateTimePicker (3.5.2):
+    - React-Core
   - RNFBAnalytics (12.3.0):
     - Firebase/Analytics (= 8.4.0)
     - React-Core
@@ -666,6 +668,7 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - "RNFBAnalytics (from `../node_modules/@react-native-firebase/analytics`)"
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBCrashlytics (from `../node_modules/@react-native-firebase/crashlytics`)"
@@ -826,6 +829,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNFBAnalytics:
     :path: "../node_modules/@react-native-firebase/analytics"
   RNFBApp:
@@ -956,6 +961,7 @@ SPEC CHECKSUMS:
   RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3
   RNCMaskedView: 138134c4d8a9421b4f2bf39055a79aa05c2d47b1
   RNCPicker: 6780c753e9e674065db90d9c965920516402579d
+  RNDateTimePicker: c9911be59b1f8670b9f244b85af3a7c295e175ed
   RNFBAnalytics: 8ba84c2d31c64374d054c8621b998f25145ffddc
   RNFBApp: 64c90ab78b6010ed5c3ade026dfe5ff6442c21fd
   RNFBCrashlytics: 1de18b8cc36d9bcf86407c4a354399228cc84a61

package.json

@@ -41,6 +41,7 @@
     "@react-native-async-storage/async-storage": "^1.15.5",
     "@react-native-community/cli": "4.13.1",
     "@react-native-community/clipboard": "^1.5.1",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/netinfo": "^5.9.10",
     "@react-native-community/progress-bar-android": "^1.0.4",
     "@react-native-community/progress-view": "^1.2.3",

src/components/DatePicker/datepickerPropTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import {
+    propTypes as fieldPropTypes,
+    defaultProps as defaultFieldPropTypes,
+} from '../ExpensiTextInput/baseExpensiTextInputPropTypes';
+
+const propTypes = {
+    ...fieldPropTypes,
+
+    /**
+     * The datepicker supports any value that `moment` can parse.
+     * `onChange` would always be called with a Date (or null)
+     */
+    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+};
+
+const defaultProps = {
+    ...defaultFieldPropTypes,
+    value: undefined,
+};
+
+export {propTypes, defaultProps};

src/components/DatePicker/index.android.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import RNDatePicker from '@react-native-community/datetimepicker';
+import moment from 'moment';
+import ExpensiTextInput from '../ExpensiTextInput';
+import CONST from '../../CONST';
+import {propTypes, defaultProps} from './datepickerPropTypes';
+
+class DatePicker extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isPickerVisible: false,
+        };
+
+        this.showPicker = this.showPicker.bind(this);
+        this.raiseDateChange = this.raiseDateChange.bind(this);
+    }
+
+    /**
+     * @param {Event} event
+     */
+    showPicker(event) {
+        this.setState({isPickerVisible: true});
+        event.preventDefault();
+    }
+
+    /**
+     * @param {Event} event
+     * @param {Date} selectedDate
+     */
+    raiseDateChange(event, selectedDate) {
+        if (event.type === 'set') {
+            this.props.onChange(selectedDate);
+        }
+
+        this.setState({isPickerVisible: false});
+    }
+
+    render() {
+        const {
+            value,
+            label,
+            placeholder,
+            hasError,
+            errorText,
+            translateX,
+            containerStyles,
+            disabled,
+        } = this.props;
+
+        const dateAsText = value ? moment(value).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
+
+        return (
+            <>
+                <ExpensiTextInput
+                    label={label}
+                    value={dateAsText}
+                    placeholder={placeholder}
+                    hasError={hasError}
+                    errorText={errorText}
+                    containerStyles={containerStyles}
+                    translateX={translateX}
+                    onPress={this.showPicker}
+                    editable={false}
+                    disabled={disabled}
+                />
+                {this.state.isPickerVisible && (
+                    <RNDatePicker
+                        value={value ? moment(value).toDate() : new Date()}
+                        mode="date"
+                        onChange={this.raiseDateChange}
+                    />
+                )}
+            </>
+        );
+    }
+}
+
+DatePicker.propTypes = propTypes;
+DatePicker.defaultProps = defaultProps;
+
+export default DatePicker;

src/components/DatePicker/index.ios.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import {Button, View} from 'react-native';
+import RNDatePicker from '@react-native-community/datetimepicker';
+import moment from 'moment';
+import ExpensiTextInput from '../ExpensiTextInput';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Popover from '../Popover';
+import CONST from '../../CONST';
+import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
+import {propTypes, defaultProps} from './datepickerPropTypes';
+
+const datepickerPropTypes = {
+    ...propTypes,
+    ...withLocalizePropTypes,
+};
+
+class Datepicker extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isPickerVisible: false,
+            selectedDate: props.value ? moment(props.value).toDate() : new Date(),
+        };
+
+        this.showPicker = this.showPicker.bind(this);
+        this.reset = this.reset.bind(this);
+        this.selectDate = this.selectDate.bind(this);
+        this.updateLocalDate = this.updateLocalDate.bind(this);
+    }
+
+    /**
+     * @param {Event} event
+     */
+    showPicker(event) {
+        this.initialValue = this.state.selectedDate;
+        this.setState({isPickerVisible: true});
+        event.preventDefault();
+    }
+
+    /**
+     * Reset the date spinner to the initial value
+     */
+    reset() {
+        this.setState({selectedDate: this.initialValue});
+    }
+
+    /**
+     * Accept the current spinner changes, close the spinner and propagate the change
+     * to the parent component (props.onChange)
+     */
+    selectDate() {
+        this.setState({isPickerVisible: false});
+        this.props.onChange(this.state.selectedDate);
+    }
+
+    /**
+     * @param {Event} event
+     * @param {Date} selectedDate
+     */
+    updateLocalDate(event, selectedDate) {
+        this.setState({selectedDate});
+    }
+
+    render() {
+        const {
+            value,
+            label,
+            placeholder,
+            hasError,
+            errorText,
+            translateX,
+            containerStyles,
+            disabled,
+        } = this.props;
+
+        const dateAsText = value ? moment(value).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
+
+        return (
+            <>
+                <ExpensiTextInput
+                    label={label}
+                    value={dateAsText}
+                    placeholder={placeholder}
+                    hasError={hasError}
+                    errorText={errorText}
+                    containerStyles={containerStyles}
+                    translateX={translateX}
+                    onPress={this.showPicker}
+                    editable={false}
+                    disabled={disabled}
+                />
+                <Popover
+                    isVisible={this.state.isPickerVisible}
+                    onClose={this.selectDate}
+                >
+                    <View style={[
+                        styles.flexRow,
+                        styles.justifyContentBetween,
+                        styles.borderBottom,
+                        styles.pb1,
+                        styles.ph4,
+                    ]}
+                    >
+                        <Button
+                            title={this.props.translate('common.reset')}
+                            color={themeColors.textError}
+                            onPress={this.reset}
+                        />
+                        <Button
+                            title={this.props.translate('common.done')}
+                            color={themeColors.link}
+                            onPress={this.selectDate}
+                        />
+                    </View>
+                    <RNDatePicker
+                        value={this.state.selectedDate}
+                        mode="date"
+                        display="spinner"
+                        onChange={this.updateLocalDate}
+                        locale={this.props.preferredLocale}
+                    />
+                </Popover>
+            </>
+        );
+    }
+}
+
+Datepicker.propTypes = datepickerPropTypes;
+Datepicker.defaultProps = defaultProps;
+
+export default withLocalize(Datepicker);