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) {

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 endDate = dt().add(365, "day").toDate()
-  const decemberOfYear = dt().set("year", selectedYear).endOf("year").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 }}
+      disabled={[
-      endMonth={decemberOfYear}
+        { 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>

components/DatePicker/index.tsx

@@ -48,7 +48,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         toDate: undefined,
       })
       setIsSelectingFrom(false)
-    } else {
+    } else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
       const fromDate = dt(selectedDate.fromDate)
       const toDate = dt(selected)
       if (toDate.isAfter(fromDate)) {
@@ -70,6 +70,14 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     function handleClickOutside(evt: Event) {
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
+        if (!selectedDate.toDate) {
+          setValue(name, {
+            fromDate: selectedDate.fromDate,
+            toDate: dt(selectedDate.fromDate)
+              .add(1, "day")
+              .format("YYYY-MM-DD"),
+          })
+        }
         setIsOpen(false)
       }
     }
@@ -77,7 +85,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen])
+  }, [setIsOpen, setValue, selectedDate, name])
 
   const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)