diff --git a/src/CONST.js b/src/CONST.js index 955e5b89d2c9..1d3704e6da0c 100755 --- 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 index 78db5e14d7c6..e7e377783945 100644 --- 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 index 83c1ca5f09d4..01dd6eba6be5 100644 --- 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 index 6e286e8447e2..2b7d3ac3555b 100644 --- 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} /> diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index af53ebe3b501..8146c6b17765 100644 --- 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 index 80a781e6badd..ca1532ba66b6 100644 --- 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 /> { || (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 ( @@ -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} />