Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: constrain min and max age date for dob pickers #17072

Merged
merged 4 commits into from
Apr 12, 2023
+28 −6
Merged

fix: constrain min and max age date for dob pickers #17072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f796d60
fix: constrain min and max age date for dob pickers
koko57 Apr 6, 2023
a7591bf
fix: apply requested changes
koko57 Apr 6, 2023
886dd09
fix: change min and max date propType
koko57 Apr 6, 2023
da1d485
Merge branch 'Expensify:main' into fix/16691-date-picker-no-constraint
koko57 Apr 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/CONST.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const CONST = {

DATE_BIRTH: {
MIN_AGE: 5,
MIN_AGE_FOR_PAYMENT: 18,
MAX_AGE: 150,
},

Expand Down
9 changes: 9 additions & 0 deletions src/components/DatePicker/datepickerPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
propTypes as fieldPropTypes,
defaultProps as defaultFieldPropTypes,
} from '../TextInput/baseTextInputPropTypes';
import CONST from '../../CONST';

const propTypes = {
...fieldPropTypes,
Expand All @@ -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};
4 changes: 2 additions & 2 deletions src/components/DatePicker/index.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
)}
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DatePicker/index.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DatePicker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Comment on lines +28 to +29
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to format it here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For min and max attribute input type="date" accepts a formatted string (yyyy-mm-dd). We pass the prop in Date format, so it needs to be formatted to work properly. We do the same for the value and the defaultValue.

this.inputRef.classList.add('expensify-datepicker');
}

Expand Down
6 changes: 6 additions & 0 deletions src/pages/EnablePayments/AdditionalDetailsStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Comment on lines +113 to +114
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Repeating this logic twice looks a bit off to me @mountiny @deetergp

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB, since they're one-liners and I'm not going to lose sleep over it. But since you bring it up, maybe it makes more sense to put the logic in the DatePicker component since both pages use it.

}

/**
Expand Down Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions src/pages/ReimbursementAccount/IdentityForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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]}>
Expand Down Expand Up @@ -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}
Expand Down