Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way to have a DateRangePicker (x-date-pickers-pro) use the browsers current locale for date format? #11240

Closed
kristerkynning opened this issue Nov 29, 2023 · 4 comments
Labels
component: pickers This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: commercial Support request from paid users

Comments

@kristerkynning
Copy link

kristerkynning commented Nov 29, 2023

The problem in depth 🔍

I have a Web-UI where I don't know which locale or what language the users may be using, so I would prefer to just use whatever language/locale is configured in the browser to format the dates.

This seems to be exactly how it works for dates shown in Data Grids.

However I have DateRangePicker which defaults to "en_US". Setting it to a specific locale works fine, but is there an easy way to just use the browsers current locale?

EDIT:
I should add, we are using date-fns for handling dates.
The code for creating the DateRangePicker:

<LocalizationProvider dateAdapter={AdapterDateFns}>
    <DateRangePicker value={[startDate, endDate]} onChange={handleDateRangeChange} />
</LocalizationProvider>

Your environment 🌎

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
/

Search keywords: daterangepicker locale
Order ID: 70895

@kristerkynning kristerkynning added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Nov 29, 2023
@alexfauquette
Copy link
Member

The localization of the date is out of the scope of MUI. It's under the responsibility of the date library you picked (date-fns in your case)

The data grid works, because it's by default the native time picker (the <input type="date" />)

For the @mui/x-date-pickers the component relies on the date library to know what is the date format, what's the name of the months.

We provide a way to update the locale for each date library, but the strategy to pick the local according to user settings is up to you.

@alexfauquette alexfauquette added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 30, 2023
@flaviendelangle
Copy link
Member

If this is a recurring pain in our community, I think we could make the bridge between our doc and the doc of the date libraries.
We are doing it for the custom format [here] and for custom week start in #11223.

If this is not something a lot of people a struggling with, then we can just answer in the issue.

With that being said, I struggle to find the answer to this question for Date Fns, they don't seem to provide a way to get the locale code of the user system.

@alexfauquette
Copy link
Member

On dayjs there is an open issue on this topic iamkun/dayjs#732

Copy link

github-actions bot commented Dec 7, 2023

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

@github-actions github-actions bot closed this as completed Dec 7, 2023
@DanailH DanailH added the component: pickers This is the name of the generic UI component, not the React module! label Feb 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: commercial Support request from paid users
Projects
None yet
Development

No branches or pull requests

4 participants