fix: datepicker min date config issue (#770)

deriv-com · Aug 7, 2024 · 9b88e2d · 9b88e2d
1 parent 453dd8f
commit 9b88e2d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/javascript/app/pages/form/form-component.jsx b/src/javascript/app/pages/form/form-component.jsx
@@ -131,6 +131,19 @@ export const FormComponent = () => {
         return null;
     }
 
+    const getMinMaxDate = () => {
+        const { minDate: min, maxDate: max } = endtime_data.datepicker_config;
+        const today = new Date();
+
+        const minDate = new Date(today);
+        minDate.setDate(today.getDate() + min);
+
+        const maxDate = new Date(today);
+        maxDate.setDate(today.getDate() + max);
+
+        return { minDate, maxDate };
+    };
+
     const payoutTypeOptions = [
         { text: localize('Stake'), value: 'stake' },
         { text: localize('Payout'), value: 'payout' },
@@ -222,7 +235,10 @@ export const FormComponent = () => {
                                                         {endtime_data.show_datepicker ? (
                                                             <DatePickerDropdown
                                                                 value={moment(expiry_date).format('DD/MM/YYYY')}
-                                                                datePickerProps={{ minDate: new Date() }}
+                                                                datePickerProps={{
+                                                                    minDate: getMinMaxDate().minDate,
+                                                                    maxDate: getMinMaxDate().maxDate,
+                                                                }}
                                                                 onSelectDate={(value) => {
                                                                     onExpiryDateChange(value);
                                                                 }}

diff --git a/src/javascript/app/pages/trade/duration.js b/src/javascript/app/pages/trade/duration.js
@@ -379,8 +379,9 @@ const Durations = (() => {
     const changeExpiryTimeType = () => {
         let requested = -1;
         const endtime_data = {
-            options        : [],
-            show_datepicker: true,
+            options          : [],
+            show_datepicker  : true,
+            datepicker_config: {},
         };
         if (CommonFunctions.getElementById('expiry_type').value === 'endtime') {
             let $expiry_date     = $('#expiry_date');
@@ -400,6 +401,8 @@ const Durations = (() => {
                 });
                 endtime_data.options = [];
                 endtime_data.show_datepicker = true;
+                endtime_data.datepicker_config.minDate = smallest_duration.unit === 'd' ? 1 : 0;
+                endtime_data.datepicker_config.maxDate = 365;
             } else {
                 endtime_data.options = [];
                 endtime_data.show_datepicker = false;