diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index 818b7fb71..503c0c6ac 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -24,10 +24,7 @@ const locales = {
   [Lang.sv]: sv,
 }
 
-export default function DatePickerForm({
-  name = "date",
-  onToggleOpen,
-}: DatePickerFormProps) {
+export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const lang = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
@@ -38,16 +35,10 @@ export default function DatePickerForm({
 
   function close() {
     setIsOpen(false)
-    if (onToggleOpen) {
-      onToggleOpen(false)
-    }
   }
 
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)
-    if (onToggleOpen) {
-      onToggleOpen(!isOpen)
-    }
   }
 
   function handleSelectDate(selected: Date) {
@@ -80,16 +71,13 @@ export default function DatePickerForm({
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
         setIsOpen(false)
-        if (onToggleOpen) {
-          onToggleOpen(false)
-        }
       }
     }
     document.body.addEventListener("click", handleClickOutside)
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen, onToggleOpen])
+  }, [setIsOpen])
 
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index 7b3ce3e2b..2012bfa7a 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -78,7 +78,7 @@
 
   .when:hover,
   .rooms:hover,
-  .when[data-open="true"],
+  .when:has([data-isopen="true"]),
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 1175ae012..75e7be187 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -23,7 +23,6 @@ export default function FormContent({
   formId,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
-  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const selectedDate = useWatch({ name: "date" })
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
@@ -37,14 +36,14 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={styles.when} data-open={isDatePickerOpen}>
+          <div className={styles.when}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
                 { totalNights: nights > 0 ? nights : 0 }
               )}
             </Caption>
-            <DatePicker onToggleOpen={setIsDatePickerOpen} />
+            <DatePicker />
           </div>
           <div className={styles.rooms}>
             <label>
diff --git a/types/components/datepicker.ts b/types/components/datepicker.ts
index 8310e1d3a..999a8ef1d 100644
--- a/types/components/datepicker.ts
+++ b/types/components/datepicker.ts
@@ -5,7 +5,6 @@ import type { DateRange } from "react-day-picker"
 
 export interface DatePickerFormProps {
   name?: string
-  onToggleOpen?: (isDatePickerOpen: boolean) => void
 }
 
 type LangWithoutEn = Lang.da | Lang.de | Lang.fi | Lang.no | Lang.sv