feat: add theme option for today in datepicker

Author: jonasho

packages/ui/src/components/Datepicker/Views/Days.tsx

@@ -9,6 +9,7 @@ import {
   getWeekDays,
   isDateEqual,
   isDateInRange,
+  isDateToday,
   Views,
 } from "../helpers";
 
@@ -23,6 +24,7 @@ export interface DatepickerViewsDaysTheme {
       base: string;
       selected: string;
       disabled: string;
+      today: string;
     };
   };
 }
@@ -62,6 +64,7 @@ export function DatepickerViewsDays() {
           const isSelected = selectedDate && isDateEqual(selectedDate, currentDate);
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
+          const isToday = isDateToday(currentDate);
 
           return (
             <button
@@ -70,6 +73,7 @@ export function DatepickerViewsDays() {
               type="button"
               className={twMerge(
                 theme.items.item.base,
+                isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
               )}

packages/ui/src/components/Datepicker/helpers.ts

@@ -44,6 +44,11 @@ export function isDateEqual(date: Date, selectedDate: Date): boolean {
   return date.getTime() === selectedDate.getTime();
 }
 
+export function isDateToday(date: Date): boolean {
+  const today = new Date();
+  return isDateEqual(date, today);
+}
+
 export function isMonthEqual(date: Date, selectedDate: Date): boolean {
   return date.getMonth() === selectedDate.getMonth();
 }

packages/ui/src/components/Datepicker/theme.ts

@@ -49,6 +49,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
+          today: "",
         },
       },
     },