[BUG] - Date Picker Ignores Start of Week Day

[peterbrczan]

HeroUI Version

@heroui/[email protected]

Describe the bug

The DatePicker component appears to have trouble handling the starting day of the week when internationalized. Specifically, when the locale is set to hu-HU, de-DE, or for example fr-FR in the HeroUIProvider, the labels in the component’s popover are correctly updated. However, the order of the days of the week remains unchanged, still starting on Sunday. In many European countries, the week begins on Monday, so this results in a UI misalignment where the days are swapped, leading to inaccurate date selection.

Is this behavior described somewhere in the documentation, or can it be handled differently? Am I overlooking something?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Code to reproduce:

import { DatePicker, DatePickerProps, HeroUIProvider } from '@heroui/react';

export function LocalizedDatePicker(props: DatePickerProps) {
  const locale = 'hu-HU'; // or de-DE, fr-FR, etc...

  return (
    <HeroUIProvider locale={locale}>
      <DatePicker label="Date" {...props} />
    </HeroUIProvider>
  );
}

Expected behavior

The component should automatically determine the starting day of the week based on the passed locale, or alternatively, allow the developer to pass a prop that explicitly sets the desired starting day of the week. This would ensure that the week layout remains in sync with the rendered dates and the correct day order is used, without causing misalignment in the calendar

Screenshots or Videos

In the screenshot, you can see that the layout for the date and month is correct, but the 20th day is positioned below Sunday. This indicates that while the overall structure is updated, the days of the week are still starting from Sunday instead of Monday, causing the 20th to appear in the wrong position.

Operating System Version

Windows, Android

Browser

Chrome

[linear]

ENG-1914 [BUG] - Date Picker Ignores Start of Week Day