[pickers] Is there a way to tell DatePicker how to initialize a new Date on first select?

[olivier-lxo]

The problem in depth

Hi,

We're trying to use the MUI-X DatePicker so, that the UI (aka. local) date matches the ISO date but we're having trouble whenever we can't provide an initial defaultDate or value as the DatePicker will initialise a new Date itself and we're then unable to tell the datepicker how the date should be initialized.

This results in us having to manually parse and transform the dates after selection which is quite error prone.

Is there a way to tell the date picker how to initialize new dates?

I've tried overwriting the DateFns Adapter and overloading the date(value) and parse(value, format) methods but this didn't work.

Here is a reproduction of the issue we're facing in Codesandbox: https://codesandbox.io/p/sandbox/datepicker-timezone-problem-reproduction-rk6cfs?file=%2Fsrc%2FDemo.tsx%3A30%2C9

Thank you for your help.

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 22.1.0 - /run/user/1000/fnm_multishells/123759_1729163330019/bin/node
    npm: 10.7.0 - /run/user/1000/fnm_multishells/123759_1729163330019/bin/npm
    pnpm: 9.9.0 - /run/user/1000/fnm_multishells/123759_1729163330019/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.58
  npmPackages:
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/core-downloads-tracker:  6.1.1 
    @mui/icons-material: ^6.1.1 => 6.1.1 
    @mui/material: ^6.0.2 => 6.1.1 
    @mui/private-theming:  6.1.1 
    @mui/styled-engine:  6.1.1 
    @mui/system:  6.1.1 
    @mui/types:  7.2.17 
    @mui/utils:  5.16.6 
    @mui/x-charts: ^7.20.0 => 7.20.0 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-date-pickers:  7.20.0 
    @mui/x-date-pickers-pro: ^7.20.0 => 7.20.0 
    @mui/x-internals:  7.15.0 
    @mui/x-license:  7.15.0 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.2.2 => 5.2.2 

Search keywords: DatePicker, DateFns, Timezones
Order ID: 68930

[olivier-lxo]

Note: I am aware that there is a whole discussion around the DateFns Timezone support but AFAIK this is currently not fully implemented/supported in MUI-X.

Related issues: #10573 #14635

[flaviendelangle]

Hi,
Would this section solve your problem

[olivier-lxo]

Hi,
Oh,thank you so much, I completely missed the referenceDate prop! 🙈

This seems to solve our problem! 👍

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@olivier-lxo How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.