[pickers] Datepicker with html5 validation

[OZZlE]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: N/A

Steps:

1. Code:

   const [date, setDate] = useState('');
   
   <form>
     <DatePicker
          maxDate={dayjs()}
          inputRef={dateRef}
          name="transactions[date]"
          inputProps={{
            required: true,
            pattern: "^(MM / DD / YYYY)",
          }}
          value={date}
        />
        <button type="submit">send</button>
   </form>
   

2. Do not pick any date just press "send"

Current behavior 😯

You can send the form without filling in date

Expected behavior 🤔

built in browser validation should prevent form from being sent but it doesn't because the value of the <input> field that datepicker has is "MM / DD / YYYY" instead of empty

"MM / DD / YYYY" should be inside placeholder attribute rather than being the value

Context 🔦

My form relies 100% on html5 validation and no js validation

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 116.0.5845.141
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.106)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6
    @emotion/styled: ^11.10.6 => 11.10.6
    @mui/base:  5.0.0-alpha.124
    @mui/core-downloads-tracker:  5.11.16
    @mui/icons-material: ^5.11.16 => 5.11.16
    @mui/material: ^5.11.16 => 5.11.16
    @mui/private-theming:  5.11.13
    @mui/styled-engine:  5.11.16
    @mui/system:  5.11.16
    @mui/types:  7.2.3
    @mui/utils:  5.11.13
    @mui/x-date-pickers: ^6.1.0 => 6.1.0
    @types/react: 18.0.29 => 18.0.29
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.0.2 => 5.0.2

USing Google Chrome Version 116.0.5845.141 (Officiell version) extended (64 bitar) on Windows 10

[LukasTy]

Thank you for opening the issue and using the library. 🙏

The problem you are experiencing is because of an incorrect empty date value of '' instead of null.
Here is a codesandbox with your described behavior working without issues.

Closing the issue. Please feel free to reopen it if you still think that there is a problem with the mentioned behavior.

[OZZlE]

Great thank you!