Merge pull request #6192 from Santhosh-Sellavel/Date_Picker_Min_Max_R…

…ange Date Picker Restriction Added for company step VBA
Expensify · Nov 18, 2021 · 9420057 · 9420057
2 parents e1a8662 + 5ce05b9
commit 9420057
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
@@ -12,11 +12,15 @@ const propTypes = {
      * `onChange` would always be called with a Date (or null)
      */
     value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+    /* Restricts for selectable max date range for the picker */
+    maximumDate: PropTypes.instanceOf(Date),
 };
 
 const defaultProps = {
     ...defaultFieldPropTypes,
     value: undefined,
+    maximumDate: undefined,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
@@ -59,6 +59,7 @@ class DatePicker extends React.Component {
                         value={this.props.value ? moment(this.props.value).toDate() : new Date()}
                         mode="date"
                         onChange={this.raiseDateChange}
+                        maximumDate={this.props.maximumDate}
                     />
                 )}
             </>

diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
@@ -108,6 +108,7 @@ class Datepicker extends React.Component {
                         display="spinner"
                         onChange={this.updateLocalDate}
                         locale={this.props.preferredLocale}
+                        maximumDate={this.props.maximumDate}
                     />
                 </Popover>
             </>

diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
@@ -30,6 +30,9 @@ 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.classList.add('expensify-datepicker');
+        if (this.props.maximumDate) {
+            this.inputRef.setAttribute('max', moment(this.props.maximumDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
+        }
     }
 
     /**

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -336,6 +336,7 @@ class CompanyStep extends React.Component {
                             placeholder={this.props.translate('companyStep.incorporationDatePlaceholder')}
                             errorText={this.getErrorText('incorporationDate') || this.getErrorText('incorporationDateFuture')}
                             translateX={-14}
+                            maximumDate={new Date()}
                         />
                     </View>
                     <View style={styles.mt4}>