From c22dfdd54e974502ca2164668927a86be75f15de Mon Sep 17 00:00:00 2001
From: Raghul <123321540+Raghul18@users.noreply.github.com>
Date: Wed, 9 Aug 2023 03:07:52 +0530
Subject: [PATCH] fix: date and month format issue on booking page for weekly
 view (#10512)

Co-authored-by: Raghul D <v-raghuld@microsoft.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 .../bookings/Booker/components/Header.tsx     | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index 3b380e6c8f..9ac23eff02 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -57,13 +57,33 @@ export function Header({
     return <LayoutToggleWithData />;
   }
 
+  const endDate = selectedDate.add(extraDays, "days");
+
+  const isSameMonth = () => {
+    return selectedDate.format("MMM") === endDate.format("MMM");
+  };
+
+  const isSameYear = () => {
+    return selectedDate.format("YYYY") === endDate.format("YYYY");
+  };
+
+  const FormattedSelectedDateRange = () => {
+    return (
+      <h3 className="min-w-[150px] text-base font-semibold leading-4">
+        {selectedDate.format("MMM D")}
+        {!isSameYear() && <span className="text-subtle">, {selectedDate.format("YYYY")} </span>}-{" "}
+        {isSameMonth() ? endDate.format("D") : endDate.format("MMM D")},{" "}
+        <span className="text-subtle">
+          {isSameYear() ? selectedDate.format("YYYY") : endDate.format("YYYY")}
+        </span>
+      </h3>
+    );
+  };
+
   return (
     <div className="border-default relative z-10 flex border-b border-l px-5 py-4">
       <div className="flex items-center gap-3">
-        <h3 className="min-w-[150px] text-base font-semibold leading-4">
-          {selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "}
-          <span className="text-subtle">{selectedDate.format("YYYY")}</span>
-        </h3>
+        <FormattedSelectedDateRange />
         <ButtonGroup>
           <Button
             variant="icon"