fix: SW-710 Datepicker UI/UX updates

components/DatePicker/Screen/Mobile.tsx

@@ -1,5 +1,4 @@
 "use client"
-import { type ChangeEvent, useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
@@ -17,34 +16,23 @@ import classNames from "react-day-picker/style.module.css"
 
 import type { DatePickerProps } from "@/types/components/datepicker"
 
-function addOneYear(_: undefined, i: number) {
-  return new Date().getFullYear() + i
-}
-
-const fiftyYearsAhead = Array.from({ length: 50 }, addOneYear)
-
 export default function DatePickerMobile({
   close,
   handleOnSelect,
   locales,
   selectedDate,
 }: DatePickerProps) {
-  const [selectedYear, setSelectedYear] = useState(() => dt().year())
   const lang = useLang()
   const intl = useIntl()
 
-  function handleSelectYear(evt: ChangeEvent<HTMLSelectElement>) {
-    setSelectedYear(Number(evt.currentTarget.value))
-  }
-
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
   const currentDate = dt().toDate()
   const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
 
-  const startMonth = dt().set("year", selectedYear).startOf("year").toDate()
-  const decemberOfYear = dt().set("year", selectedYear).endOf("year").toDate()
+  const endDate = dt().add(365, "day").toDate()
+  const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
     <DayPicker
       classNames={{
@@ -63,8 +51,11 @@ export default function DatePickerMobile({
         week: styles.week,
         weekday: `${classNames.weekday} ${styles.weekDay}`,
       }}
-      disabled={{ from: startOfCurrentMonth, to: yesterday }}
-      endMonth={decemberOfYear}
+      disabled={[
+        { from: startOfCurrentMonth, to: yesterday },
+        { from: endDate, to: endOfLastMonth },
+      ]}
+      endMonth={endDate}
       excludeDisabled
       footer
       formatters={{
@@ -77,11 +68,11 @@ export default function DatePickerMobile({
       locale={locale}
       mode="range"
       /** Showing full year or what's left of it */
-      numberOfMonths={12}
+      numberOfMonths={13}
       onDayClick={handleOnSelect}
       required
       selected={selectedDate}
-      startMonth={startMonth}
+      startMonth={currentDate}
       weekStartsOn={1}
       components={{
         Footer(props) {
@@ -115,17 +106,6 @@ export default function DatePickerMobile({
           return (
             <div {...props}>
               <header className={styles.header}>
-                <select
-                  className={styles.select}
-                  defaultValue={selectedYear}
-                  onChange={handleSelectYear}
-                >
-                  {fiftyYearsAhead.map((year) => (
-                    <option key={year} value={year}>
-                      {year}
-                    </option>
-                  ))}
-                </select>
                 <button className={styles.close} onClick={close} type="button">
                   <CloseLargeIcon />
                 </button>