Merge branch 'master' of github.com:xola/ui-kit

rushi · Sep 25, 2023 · 0fdbc5e · 0fdbc5e
2 parents 9d47634 + f969a4a
commit 0fdbc5e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/components/DatePicker/DatePicker.css b/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 */
 }

diff --git a/src/components/DatePicker/DatePicker.jsx b/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,

diff --git a/src/components/DatePicker/MonthYearSelector.jsx b/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) => {