diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx
index 113d8b365..df84cd65d 100644
--- a/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/components/BookingWidget/MobileToggleButton/index.tsx
@@ -33,10 +33,10 @@ export default function MobileToggleButton({
     ? JSON.parse(decodeURIComponent(location))
     : null
 
-  const nights = dt(d.to).diff(dt(d.from), "days")
+  const nights = dt(d.toDate).diff(dt(d.fromDate), "days")
 
-  const selectedFromDate = dt(d.from).locale(lang).format("D MMM")
-  const selectedToDate = dt(d.to).locale(lang).format("D MMM")
+  const selectedFromDate = dt(d.fromDate).locale(lang).format("D MMM")
+  const selectedToDate = dt(d.toDate).locale(lang).format("D MMM")
 
   useEffect(() => {
     setHasMounted(true)
diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index b07b1a0d8..a68f137ea 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -100,13 +100,21 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
           close={close}
           handleOnSelect={handleSelectDate}
           locales={locales}
-          selectedDate={selectedDate}
+          // DayPicker lib needs Daterange in form as below to show appropriate UI
+          selectedDate={{
+            from: selectedDate.fromDate,
+            to: selectedDate.toDate,
+          }}
         />
         <DatePickerMobile
           close={close}
           handleOnSelect={handleSelectDate}
           locales={locales}
-          selectedDate={selectedDate}
+          // DayPicker lib needs Daterange in form as below to show appropriate UI
+          selectedDate={{
+            from: selectedDate.fromDate,
+            to: selectedDate.toDate,
+          }}
         />
       </div>
     </div>
diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx
index 17348304e..270a38b04 100644
--- a/components/Forms/BookingWidget/index.tsx
+++ b/components/Forms/BookingWidget/index.tsx
@@ -33,10 +33,7 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
 
     const bookingFlowPage =
       locationData.type == "cities" ? selectHotel[lang] : selectRate[lang]
-    const bookingWidgetParams = new URLSearchParams({
-      fromDate: data.date.from,
-      toDate: data.date.to,
-    })
+    const bookingWidgetParams = new URLSearchParams(data.date)
 
     if (locationData.type == "cities")
       bookingWidgetParams.set("city", locationData.name)