[Date Picker] fix: moment date conversion for Date Picker in native

src/CONST.js

@@ -65,6 +65,7 @@ const CONST = {
         MOMENT_FORMAT_STRING: 'YYYY-MM-DD',
         UNIX_EPOCH: '1970-01-01 00:00:00.000',
         MAX_DATE: '9999-12-31',
+        MIN_DATE: '0001-01-01',
     },
     SMS: {
         DOMAIN: '@expensify.sms',

src/components/DatePicker/index.android.js

@@ -26,7 +26,8 @@ class DatePicker extends React.Component {
      */
     setDate(event, selectedDate) {
         if (event.type === 'set') {
-            this.props.onInputChange(selectedDate);
+            const asMoment = moment(selectedDate, true);
+            this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING));
         }
 
         this.setState({isPickerVisible: false});
@@ -69,6 +70,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)}
                     />
                 )}
             </>

src/components/DatePicker/index.ios.js

@@ -68,7 +68,8 @@ class DatePicker extends React.Component {
      */
     selectDate() {
         this.setState({isPickerVisible: false});
-        this.props.onInputChange(this.state.selectedDate);
+        const asMoment = moment(this.state.selectedDate, true);
+        this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING));
     }
 
     /**
@@ -131,6 +132,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)}
                     />
                 </Popover>
             </>

src/components/DatePicker/index.js

@@ -31,6 +31,7 @@ class DatePicker extends React.Component {
         // 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.classList.add('expensify-datepicker');
     }
 

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
-import moment from 'moment';
 import IdologyQuestions from './IdologyQuestions';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -178,7 +177,7 @@ class AdditionalDetailsStep extends React.Component {
             addressCity: values[INPUT_IDS.ADDRESS.city],
             addressState: values[INPUT_IDS.ADDRESS.state],
             addressZip: values[INPUT_IDS.ADDRESS.zipCode],
-            dob: moment(values[INPUT_IDS.DOB]).format(CONST.DATE.MOMENT_FORMAT_STRING),
+            dob: values[INPUT_IDS.DOB],
             ssn: values[INPUT_IDS.SSN],
         };
 

src/pages/ReimbursementAccount/CompanyStep.js

@@ -3,7 +3,6 @@ import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
-import moment from 'moment';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import CONST from '../../CONST';
@@ -128,7 +127,6 @@ class CompanyStep extends React.Component {
 
             // Fields from Company step
             ...values,
-            incorporationDate: moment(values.incorporationDate).format(CONST.DATE.MOMENT_FORMAT_STRING),
             companyTaxID: values.companyTaxID.replace(CONST.REGEX.NON_NUMERIC, ''),
             companyPhone: LoginUtils.getPhoneNumberWithoutUSCountryCodeAndSpecialChars(values.companyPhone),
         };

src/pages/ReimbursementAccount/RequestorStep.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {View} from 'react-native';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
@@ -93,7 +92,6 @@ class RequestorStep extends React.Component {
         const payload = {
             bankAccountID: lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0,
             ...values,
-            dob: moment(values.dob).format(CONST.DATE.MOMENT_FORMAT_STRING),
         };
 
         BankAccounts.updatePersonalInformationForBankAccount(payload);

src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
@@ -48,7 +47,7 @@ class DateOfBirthPage extends Component {
      */
     updateDateOfBirth(values) {
         PersonalDetails.updateDateOfBirth(
-            values.dob.trim(),
+            values.dob,
         );
     }
 
@@ -62,7 +61,7 @@ class DateOfBirthPage extends Component {
         const minimumAge = 5;
         const maximumAge = 150;
 
-        if (_.isEmpty(values.dob)) {
+        if (!values.dob || !ValidationUtils.isValidDate(values.dob)) {
             errors.dob = this.props.translate('common.error.fieldRequired');
         }
         const dateError = ValidationUtils.getAgeRequirementError(values.dob, minimumAge, maximumAge);