[DatePicker] Date Picker value cannot be set when changing only the year

[jessicashin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When Date Picker has a value, the value cannot be changed when changing only the year using the calendar.

Expected behavior 🤔

Date Picker should update the year to the selected year.

Steps to reproduce 🕹

Steps:

1. Use example under Basic Usage https://mui.com/components/date-picker/#basic-usage
2. Select any date using the calendar
3. Open the calendar again and navigate to a different year
4. Select the same numbered day

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1030NG7 CPU @ 1.10GHz
    Memory: 31.76 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    npm: 8.4.1 - /usr/local/bin/npm
  Managers:
    Gradle: 4.10.3 - /opt/gradle/gradle-4.10.3/bin/gradle
    Homebrew: 3.3.9 - /usr/local/bin/brew
    pip3: 21.2.3 - /Library/Frameworks/Python.framework/Versions/3.10/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Git: 2.33.0 - /usr/local/bin/git
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.12 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: 4126 - /Applications/Sublime Text.app/Contents/SharedSupport/bin/subl
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.17 - /usr/local/go/bin/go
    Java: 11.0.12 - /usr/bin/javac
    Perl: 5.30.3 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.10.0 - /Library/Frameworks/Python.framework/Versions/3.10/bin/python3
    Ruby: 2.6.8 - /usr/bin/ruby
  Databases:
    PostgreSQL: 14.1 - /usr/local/bin/postgres
    SQLite: 3.36.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 99.0.4844.51
    Safari: 15.3

Using Chrome

[abhinav-22-tech]

Can I take that issue? @danilo-leal @flaviendelangle

[flaviendelangle]

Yes !

Just so you know, we are migrating the code to https://github.com/mui-org/mui-x to I will reproduce your fix there

[tarhunakau]

Any news?

[5paun]

I'm sorry, but is this a bug planned to be fixed?

[remy90]

Just so you know, we are migrating the code to https://github.com/mui-org/mui-x to I will reproduce your fix there

@flaviendelangle Whats happening to the MIT Date Picker?

[flaviendelangle]

It will be moved to @mui/x-date-pickers and remain MIT.
The X packages have a commercial package and a community package (the community being under MIT license).

All the features currently available that will go to the commercial package are explicitly flagged as such on the doc
For instance here

[Valentin1918]

Invented some workaround to overcome this issue )

import React from 'react';
import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/lab';


const CustomDesktopDatePicker: React.FC<DesktopDatePickerProps> = ({ onChange, ...props }) => {
  const [newDate, setNewDate] = React.useState<string>('');

  return (
    <DesktopDatePicker
      onChange={() => {}}
      onYearChange={(value) => {
        setNewDate(value);
        onChange(value);
      }}
      onAccept={(value) => {
        const newYear = new Date(newDate).getFullYear();
        const year = new Date(value).getFullYear();
        const sameYear = newYear === year;
        onChange(sameYear ? value : newDate || value);
        setNewDate('');
      }}
      {...props}
    />
  );
};

[carloscapella]

The bug is still present, another workarround (if you use formik) could be

onChange={ (field) => {

                  formik.setFieldTouched('fieldName', true);
                }}

Tested with:

"react": "^18.2.0",
"formik": "^2.2.9",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.5",
"@mui/x-data-grid": "^5.12.3",
"@mui/x-data-grid-generator": "^5.12.3",
"@mui/x-date-pickers": "^5.0.0-alpha.7",

[LukasTy]

The bug is still present, another workarround (if you use formik) could be
<...>
"@mui/x-date-pickers": "^5.0.0-alpha.7",

No offense, but have you tried bumping the version to at least the latest v5? 🤔
https://v5.mui.com/x/react-date-pickers/date-picker/
Could you clarify the flow that allows you to experience the issue?
Or even better, provide a reproduction example in the form of a minimal GitHub repo or a StackBlitz example.
If it is an issue on v5, but fixed on v6, I'll kindly ask you to upgrade, because v5 is no longer supported and v6 is the latest LTS.

[carloscapella]

I see the issue is v5 has no support anymore, thanks for the hint. The problem is upgrading production Apps is not as straight forward as we could wish. I'll elevate the issue for establishing our internal upgrade. Thanks again