X2-7128 fix(datepicker): enhances ux for relative date range picker (#…

…268)

* X2-7128 fix(datepicker): enhances ux for relative date range picker

1. resolves issue, when user changes the month on right side calendar, it gets switched to the right side

2. hides days outside of current month

* X2-7128 chore(datepicker): small css fix for outside days in date range picker

src/components/DatePicker/DatePicker.css

@@ -127,7 +127,7 @@
 }
 
 /* Change the dates within the date to have the full light blue to show that it's a part of the range */
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
     @apply rounded-none bg-blue-lighter text-black;
 }
 
@@ -149,8 +149,8 @@
     @apply bg-transparent text-black;
 }
 
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date,
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date:hover {
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date,
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date:hover {
     @apply bg-blue-lighter text-black;
 }
 
@@ -167,7 +167,7 @@
 }
 
 /* Make the start date have a 50% light blue background towards the RIGHT side */
-.date-range-picker .DayPicker-Day--start {
+.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--outside) {
     @apply rounded-none;
     background: linear-gradient(90deg, #ffffff 40%, #d1e1ff 25%);
 }
@@ -177,7 +177,7 @@
 }
 
 /* Make the end date have a 50% light blue background towards the LEFT side */
-.date-range-picker .DayPicker-Day--end {
+.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--outside) {
     @apply rounded-none;
     background: linear-gradient(90deg, #d1e1ff 40%, #ffffff 25%); /* D1E1FF Blue lighter */
 }

src/components/DatePicker/DatePicker.jsx

@@ -183,7 +183,7 @@ export const DatePicker = ({
                 ) : null}
 
                 <DayPicker
-                    showOutsideDays
+                    showOutsideDays={!isRangeVariant}
                     className={clsx(
                         "ui-date-picker rounded-lg pt-3",
                         useDateRangeStyle ? "date-range-picker" : null,

src/components/DatePicker/MonthYearSelector.jsx

@@ -5,16 +5,28 @@ import { Select } from "../Forms/Select";
 
 const today = dayjs();
 
+const getDiffInMonths = (to, from) => {
+    return 12 * (to.getFullYear() - from.getFullYear()) + (to.getMonth() - from.getMonth());
+};
+
 export const MonthYearSelector = ({ date, onChange, currentMonth }) => {
     const months = [...Array.from({ length: 12 }).keys()].map((m) => today.month(m).format("MMM"));
     // 2012 as baseline + 5 years in future
     const years = [...Array.from({ length: today.year() - 2012 + 5 + 1 }).keys()].map((y) =>
         today.year(2012 + y).format("YYYY"),
     );
 
+    /**
+     * For range date pickers, when we show multiple months, this indicates the index for selector component with respected to the first month selected in date-range picker (i.e. month selected on left side)
+     *
+     * @example
+     * If left side month is "August 2023", and we are showing this selector for "September 2023" (`date=2023-09-01T00:00:00Z`). The `selectorIndex` would be 1.
+     **/
+    const selectorIndex = getDiffInMonths(date, currentMonth);
+
     const handleMonthChange = (event) => {
         const { year, month } = event.target.form;
-        onChange(new Date(year.value, month.value));
+        onChange(new Date(year.value, Number(month.value) - selectorIndex));
     };
 
     const handleYearChange = (event) => {