feat: add weekStartsOn to DatePicker and DateRangePicker

src/components/input-elements/Calendar/Calendar.tsx

@@ -26,6 +26,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
   disabled,
   enableYearNavigation,
   classNames,
+  weekStartsOn = 0,
   ...other
 }: T & { enableYearNavigation: boolean }) {
   return (
@@ -37,6 +38,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
       onSelect={onSelect as any}
       locale={locale}
       disabled={disabled}
+      weekStartsOn={weekStartsOn}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",

src/components/input-elements/DatePicker/DatePicker.tsx

@@ -34,6 +34,7 @@ export interface DatePickerProps
   locale?: Locale;
   enableClear?: boolean;
   enableYearNavigation?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   children?: React.ReactElement[] | React.ReactElement;
 }
 
@@ -50,6 +51,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
     enableClear = true,
     className,
     enableYearNavigation = false,
+    weekStartsOn = 0,
     ...other
   } = props;
 
@@ -163,6 +165,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
             mode="single"
             defaultMonth={defaultMonth}
             selected={selectedValue}
+            weekStartsOn={weekStartsOn}
             onSelect={
               ((v: Date) => {
                 onValueChange?.(v);

src/components/input-elements/DateRangePicker/DateRangePicker.tsx

@@ -48,6 +48,7 @@ export interface DateRangePickerProps
   locale?: Locale;
   enableClear?: boolean;
   enableYearNavigation?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   children?: React.ReactElement[] | React.ReactElement;
 }
 
@@ -67,6 +68,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     children,
     className,
     enableYearNavigation = false,
+    weekStartsOn = 0,
     ...other
   } = props;
 
@@ -275,6 +277,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
               day_range_end:
                 "rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
             }}
+            weekStartsOn={weekStartsOn}
             {...props}
           />
         </Popover.Panel>

src/stories/input-elements/DatePicker.stories.tsx

@@ -91,3 +91,9 @@ UncontrolledWithoutAllowClear.args = {
   defaultValue: new Date(2022, 10, 1),
   enableClear: false,
 };
+
+export const UncontrolledWithWeekStartsOnWednesday = UncontrolledTemplate.bind({});
+UncontrolledWithWeekStartsOnWednesday.args = {
+  defaultValue: new Date(2022, 10, 1),
+  weekStartsOn: 3,
+};

src/stories/input-elements/DateRangePicker.stories.tsx

@@ -199,3 +199,9 @@ UncontrolledWithoutAllowClear.args = {
   defaultValue: { from: new Date(2022, 10, 1), to: new Date() },
   enableClear: false,
 };
+
+export const UncontrolledWithWeekStartsOnTuesday = UncontrolledTemplate.bind({});
+UncontrolledWithWeekStartsOnTuesday.args = {
+  defaultValue: { from: new Date(2022, 10, 1), to: new Date() },
+  weekStartsOn: 2,
+};