fix: SW-710 Datepicker UI/UX updates

components/DatePicker/Screen/Desktop.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
@@ -26,12 +27,19 @@ export default function DatePickerDesktop({
 }: DatePickerProps) {
   const lang = useLang()
   const intl = useIntl()
+  const [month, setMonth] = useState(new Date())
 
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
   const currentDate = dt().toDate()
   const startOfMonth = dt(currentDate).set("date", 1).toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
+  const endDate = dt().add(365, "day").toDate()
+  const endOfLastMonth = dt(endDate).endOf("month").toDate()
+
+  function handleMonthChange(selected: Date) {
+    setMonth(selected)
+  }
   return (
     <DayPicker
       classNames={{
@@ -49,7 +57,10 @@ export default function DatePickerDesktop({
         week: styles.week,
         weekday: `${classNames.weekday} ${styles.weekDay}`,
       }}
-      disabled={{ from: startOfMonth, to: yesterday }}
+      disabled={[
+        { from: startOfMonth, to: yesterday },
+        { from: endDate, to: endOfLastMonth },
+      ]}
       excludeDisabled
       footer
       formatters={{
@@ -60,12 +71,14 @@ export default function DatePickerDesktop({
       lang={lang}
       locale={locale}
       mode="range"
+      month={month}
       numberOfMonths={2}
       onDayClick={handleOnSelect}
-      pagedNavigation
+      onMonthChange={handleMonthChange}
       required={false}
       selected={selectedDate}
       startMonth={currentDate}
+      endMonth={endDate}
       weekStartsOn={1}
       components={{
         Chevron(props) {