Merge pull request #17072 from koko57/fix/16691-date-picker-no-constr…

…aint fix: constrain min and max age date for dob pickers
Expensify · Apr 12, 2023 · 1b756ef · 1b756ef
2 parents cf44fda + da1d485
commit 1b756ef
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 6 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -63,6 +63,7 @@ const CONST = {
 
     DATE_BIRTH: {
         MIN_AGE: 5,
+        MIN_AGE_FOR_PAYMENT: 18,
         MAX_AGE: 150,
     },
 

diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
@@ -3,6 +3,7 @@ import {
     propTypes as fieldPropTypes,
     defaultProps as defaultFieldPropTypes,
 } from '../TextInput/baseTextInputPropTypes';
+import CONST from '../../CONST';
 
 const propTypes = {
     ...fieldPropTypes,
@@ -18,11 +19,19 @@ const propTypes = {
      * `onInputChange` would always be called with a Date (or null)
      */
     defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+    /** The earliest date allowed to select */
+    minDate: PropTypes.instanceOf(Date),
+
+    /** The latest date allowed to select */
+    maxDate: PropTypes.instanceOf(Date),
 };
 
 const defaultProps = {
     ...defaultFieldPropTypes,
     value: undefined,
+    minDate: new Date(CONST.DATE.MIN_DATE),
+    maxDate: new Date(CONST.DATE.MAX_DATE),
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
@@ -74,8 +74,8 @@ class DatePicker extends React.Component {
                         value={this.props.value || this.props.defaultValue ? moment(this.props.value || this.props.defaultValue).toDate() : new Date()}
                         mode="date"
                         onChange={this.setDate}
-                        maximumDate={new Date(CONST.DATE.MAX_DATE)}
-                        minimumDate={new Date(CONST.DATE.MIN_DATE)}
+                        maximumDate={this.props.maxDate}
+                        minimumDate={this.props.minDate}
                     />
                 )}
             </>

diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
@@ -136,8 +136,8 @@ class DatePicker extends React.Component {
                         themeVariant="dark"
                         onChange={this.updateLocalDate}
                         locale={this.props.preferredLocale}
-                        maximumDate={new Date(CONST.DATE.MAX_DATE)}
-                        minimumDate={new Date(CONST.DATE.MIN_DATE)}
+                        maximumDate={this.props.maxDate}
+                        minimumDate={this.props.minDate}
                     />
                 </Popover>
             </>

diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
@@ -25,8 +25,8 @@ class DatePicker extends React.Component {
     componentDidMount() {
         // Adds nice native datepicker on web/desktop. Not possible to set this through props
         this.inputRef.setAttribute('type', 'date');
-        this.inputRef.setAttribute('max', CONST.DATE.MAX_DATE);
-        this.inputRef.setAttribute('min', CONST.DATE.MIN_DATE);
+        this.inputRef.setAttribute('max', moment(this.props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
+        this.inputRef.setAttribute('min', moment(this.props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
         this.inputRef.classList.add('expensify-datepicker');
     }
 

diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
+import moment from 'moment/moment';
 import IdologyQuestions from './IdologyQuestions';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -108,6 +109,9 @@ class AdditionalDetailsStep extends React.Component {
             ssn: 'common.ssnLast4',
             ssnFull9: 'common.ssnFull9',
         };
+
+        this.minDate = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'Y').toDate();
+        this.maxDate = moment().subtract(CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT, 'Y').toDate();
     }
 
     /**
@@ -262,6 +266,8 @@ class AdditionalDetailsStep extends React.Component {
                             containerStyles={[styles.mt4]}
                             label={this.props.translate(this.fieldNameTranslationKeys.dob)}
                             placeholder={this.props.translate('common.dob')}
+                            minDate={this.minDate}
+                            maxDate={this.maxDate}
                             shouldSaveDraft
                         />
                         <TextInput

diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import moment from 'moment/moment';
 import _ from 'underscore';
 import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
@@ -134,6 +135,9 @@ const IdentityForm = (props) => {
         || (props.errors.dobAge ? props.translate('bankAccount.error.age') : '');
     const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
 
+    const minDate = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'Y').toDate();
+    const maxDate = moment().subtract(CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT, 'Y').toDate();
+
     return (
         <View style={props.style}>
             <View style={[styles.flexRow]}>
@@ -169,6 +173,8 @@ const IdentityForm = (props) => {
                 defaultValue={props.values.dob || props.defaultValues.dob}
                 onInputChange={value => props.onFieldChange({dob: value})}
                 errorText={dobErrorText}
+                minDate={minDate}
+                maxDate={maxDate}
             />
             <TextInput
                 inputID={props.inputKeys.ssnLast4}