From 71517d61c16a21b040a239be3ac226bb3bfa3106 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 7 Aug 2024 11:17:37 +0800
Subject: [PATCH] fix: datepicker min date config issue

---
 .../app/pages/form/form-component.jsx          | 18 +++++++++++++++++-
 src/javascript/app/pages/trade/duration.js     |  7 +++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/javascript/app/pages/form/form-component.jsx b/src/javascript/app/pages/form/form-component.jsx
index d051cb4af53..7229b5a51ed 100644
--- 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
index 481901a30b5..08dfabd4c1c 100644
--- 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;