[pickers] Do not support unparsed date formats anymore (#6170)

docs/data/date-pickers/custom-components/ArrowSwitcherComponent.tsx

@@ -15,7 +15,7 @@ import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
 import { DateRange } from '@mui/x-date-pickers-pro';
 
-const components: DatePickerProps<any, any>['components'] = {
+const components: DatePickerProps<any>['components'] = {
   LeftArrowIcon: ArrowLeft,
   RightArrowIcon: ArrowRight,
 };

docs/data/date-pickers/custom-components/ArrowSwitcherComponentProps.tsx

@@ -14,7 +14,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import Box from '@mui/material/Box';
 
-const componentsProps: DatePickerProps<any, any>['componentsProps'] = {
+const componentsProps: DatePickerProps<any>['componentsProps'] = {
   leftArrowIcon: { fontSize: 'large' },
   rightArrowIcon: { fontSize: 'large' },
   previousIconButton: {

docs/data/date-pickers/date-field/CustomUIDateField.tsx

@@ -15,12 +15,10 @@ import {
   UseDateFieldComponentProps,
 } from '@mui/x-date-pickers/DateField';
 
-type JoyDateFieldProps = UseDateFieldComponentProps<Dayjs, Dayjs, JoyTextFieldProps>;
+type JoyDateFieldProps = UseDateFieldComponentProps<Dayjs, JoyTextFieldProps>;
 
 const JoyDateField = (props: JoyDateFieldProps) => {
-  const { inputRef, inputProps } = useDateField<Dayjs, Dayjs, JoyDateFieldProps>(
-    props,
-  );
+  const { inputRef, inputProps } = useDateField<Dayjs, JoyDateFieldProps>(props);
 
   return (
     <JoyTextField
@@ -30,18 +28,12 @@ const JoyDateField = (props: JoyDateFieldProps) => {
   );
 };
 
-type UnstyledDateFieldProps = UseDateFieldComponentProps<
-  Dayjs,
-  Dayjs,
-  InputUnstyledProps
->;
+type UnstyledDateFieldProps = UseDateFieldComponentProps<Dayjs, InputUnstyledProps>;
 
 const UnstyledDateField = (props: UnstyledDateFieldProps) => {
-  const { inputRef, inputProps } = useDateField<
-    Dayjs,
-    Dayjs,
-    UnstyledDateFieldProps
-  >(props);
+  const { inputRef, inputProps } = useDateField<Dayjs, UnstyledDateFieldProps>(
+    props,
+  );
 
   return (
     <InputUnstyled
@@ -52,7 +44,6 @@ const UnstyledDateField = (props: UnstyledDateFieldProps) => {
 };
 
 type BrowserInputDateFieldProps = UseDateFieldComponentProps<
-  Dayjs,
   Dayjs,
   React.HTMLAttributes<HTMLInputElement>
 >;
@@ -61,7 +52,7 @@ const BrowserInputDateField = (props: BrowserInputDateFieldProps) => {
   const {
     inputRef,
     inputProps: { error, ...inputProps },
-  } = useDateField<Dayjs, Dayjs, BrowserInputDateFieldProps>(props);
+  } = useDateField<Dayjs, BrowserInputDateFieldProps>(props);
 
   return <input {...inputProps} ref={inputRef} />;
 };

docs/data/date-pickers/date-picker/date-picker.md

@@ -73,7 +73,7 @@ For ease of use, the date picker will automatically change the layout between po
 
 ## Sub-components
 
-Some lower-level sub-components (`CalendarPicker`, `MonthPicker`, and `YearPicker`) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).
+Some lower-level sub-components (`CalendarPicker`, `MonthPicker`, and `YearPicker`) are also exported.
 
 {{"demo": "SubComponentsPickers.js"}}
 

docs/data/date-pickers/time-picker/time-picker.md

@@ -55,7 +55,7 @@ The time picker component can be disabled or read-only.
 
 ## Sub-components
 
-Some lower-level sub-components (`ClockPicker`) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).
+Some lower-level sub-components (`ClockPicker`) are also exported.
 
 {{"demo": "SubComponentsTimePickers.js"}}
 

docs/pages/x/api/date-pickers/date-picker.json

@@ -31,7 +31,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/date-range-picker.json

@@ -37,7 +37,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/date-time-picker.json

@@ -35,7 +35,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "hideTabs": { "type": { "name": "bool" }, "default": "false for mobile, true for desktop" },
     "InputAdornmentProps": { "type": { "name": "object" } },

docs/pages/x/api/date-pickers/desktop-date-picker.json

@@ -26,7 +26,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/desktop-date-range-picker.json

@@ -32,7 +32,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/desktop-date-time-picker.json

@@ -30,7 +30,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "hideTabs": { "type": { "name": "bool" }, "default": "false for mobile, true for desktop" },
     "InputAdornmentProps": { "type": { "name": "object" } },

docs/pages/x/api/date-pickers/desktop-time-picker.json

@@ -23,7 +23,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/mobile-date-picker.json

@@ -27,7 +27,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/mobile-date-range-picker.json

@@ -33,7 +33,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/mobile-date-time-picker.json

@@ -31,7 +31,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "hideTabs": { "type": { "name": "bool" }, "default": "false for mobile, true for desktop" },
     "InputAdornmentProps": { "type": { "name": "object" } },

docs/pages/x/api/date-pickers/mobile-time-picker.json

@@ -24,7 +24,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/static-date-picker.json

@@ -30,7 +30,7 @@
     },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/static-date-range-picker.json

@@ -36,7 +36,7 @@
     },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/static-date-time-picker.json

@@ -34,7 +34,7 @@
     },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "hideTabs": { "type": { "name": "bool" }, "default": "false for mobile, true for desktop" },
     "InputAdornmentProps": { "type": { "name": "object" } },

docs/pages/x/api/date-pickers/static-time-picker.json

@@ -27,7 +27,7 @@
     },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/pages/x/api/date-pickers/time-picker.json

@@ -28,7 +28,7 @@
     "disablePast": { "type": { "name": "bool" } },
     "getOpenDialogAriaText": {
       "type": { "name": "func" },
-      "default": "(date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`"
+      "default": "(date, utils) => `Choose date, selected date is ${utils.format(date, 'fullDate')}`"
     },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },

docs/translations/api-docs/date-pickers/date-picker-pt.json

@@ -16,7 +16,7 @@
     "disableMaskedInput": "Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.",
     "disableOpenPicker": "Do not render open picker button (renders only text field with validation).",
     "disablePast": "If <code>true</code> disable values after the current time.",
-    "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType<br><br><strong>Signature:</strong><br><code>function(date: TInputDate, utils: MuiPickersAdapter&lt;TDate&gt;) =&gt; string</code><br><em>date:</em> The date from which we want to add an aria-text.<br><em>utils:</em> The utils to manipulate the date.<br> <em>returns</em> (string): The aria-text to render inside the dialog.",
+    "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType<br><br><strong>Signature:</strong><br><code>function(date: TDate | null, utils: MuiPickersAdapter&lt;TDate&gt;) =&gt; string</code><br><em>date:</em> The date from which we want to add an aria-text.<br><em>utils:</em> The utils to manipulate the date.<br> <em>returns</em> (string): The aria-text to render inside the dialog.",
     "InputAdornmentProps": "Props to pass to keyboard input adornment.",
     "inputFormat": "Format string.",
     "inputRef": "Pass a ref to the <code>input</code> element.",
@@ -26,9 +26,9 @@
     "maxDate": "Maximal selectable date. @DateIOType",
     "minDate": "Minimal selectable date. @DateIOType",
     "onAccept": "Callback fired when date is accepted @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue) =&gt; void</code><br><em>value:</em> The value that was just accepted.",
-    "onChange": "Callback fired when the value (the selected date) changes @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue, keyboardInputValue: string) =&gt; void</code><br><em>value:</em> The new parsed value.<br><em>keyboardInputValue:</em> The current value of the keyboard input.",
+    "onChange": "Callback fired when the value (the selected date) changes @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue, keyboardInputValue: string) =&gt; void</code><br><em>value:</em> The new value.<br><em>keyboardInputValue:</em> The current value of the keyboard input.",
     "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
-    "onError": "Callback that fired when input value or new <code>value</code> prop validation returns <strong>new</strong> validation error (or value is valid after error). In case of validation error detected <code>reason</code> prop return non-null value and <code>TextField</code> must be displayed in <code>error</code> state. This can be used to render appropriate form error.<br><a href=\"https://next.material-ui-pickers.dev/guides/forms\">Read the guide</a> about form integration and error displaying.<br><br><strong>Signature:</strong><br><code>function(reason: TError, value: TInputValue) =&gt; void</code><br><em>reason:</em> The reason why the current value is not valid.<br><em>value:</em> The invalid value.",
+    "onError": "Callback that fired when input value or new <code>value</code> prop validation returns <strong>new</strong> validation error (or value is valid after error). In case of validation error detected <code>reason</code> prop return non-null value and <code>TextField</code> must be displayed in <code>error</code> state. This can be used to render appropriate form error.<br><a href=\"https://next.material-ui-pickers.dev/guides/forms\">Read the guide</a> about form integration and error displaying.<br><br><strong>Signature:</strong><br><code>function(reason: TError, value: TValue) =&gt; void</code><br><em>reason:</em> The reason why the current value is not valid.<br><em>value:</em> The invalid value.",
     "onMonthChange": "Callback firing on month change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(month: TDate) =&gt; void | Promise</code><br><em>month:</em> The new month.<br> <em>returns</em> (void | Promise): -",
     "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
     "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: CalendarPickerView) =&gt; void</code><br><em>view:</em> The new view.",

docs/translations/api-docs/date-pickers/date-picker-zh.json

@@ -16,7 +16,7 @@
     "disableMaskedInput": "Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.",
     "disableOpenPicker": "Do not render open picker button (renders only text field with validation).",
     "disablePast": "If <code>true</code> disable values after the current time.",
-    "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType<br><br><strong>Signature:</strong><br><code>function(date: TInputDate, utils: MuiPickersAdapter&lt;TDate&gt;) =&gt; string</code><br><em>date:</em> The date from which we want to add an aria-text.<br><em>utils:</em> The utils to manipulate the date.<br> <em>returns</em> (string): The aria-text to render inside the dialog.",
+    "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType<br><br><strong>Signature:</strong><br><code>function(date: TDate | null, utils: MuiPickersAdapter&lt;TDate&gt;) =&gt; string</code><br><em>date:</em> The date from which we want to add an aria-text.<br><em>utils:</em> The utils to manipulate the date.<br> <em>returns</em> (string): The aria-text to render inside the dialog.",
     "InputAdornmentProps": "Props to pass to keyboard input adornment.",
     "inputFormat": "Format string.",
     "inputRef": "Pass a ref to the <code>input</code> element.",
@@ -26,9 +26,9 @@
     "maxDate": "Maximal selectable date. @DateIOType",
     "minDate": "Minimal selectable date. @DateIOType",
     "onAccept": "Callback fired when date is accepted @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue) =&gt; void</code><br><em>value:</em> The value that was just accepted.",
-    "onChange": "Callback fired when the value (the selected date) changes @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue, keyboardInputValue: string) =&gt; void</code><br><em>value:</em> The new parsed value.<br><em>keyboardInputValue:</em> The current value of the keyboard input.",
+    "onChange": "Callback fired when the value (the selected date) changes @DateIOType.<br><br><strong>Signature:</strong><br><code>function(value: TValue, keyboardInputValue: string) =&gt; void</code><br><em>value:</em> The new value.<br><em>keyboardInputValue:</em> The current value of the keyboard input.",
     "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
-    "onError": "Callback that fired when input value or new <code>value</code> prop validation returns <strong>new</strong> validation error (or value is valid after error). In case of validation error detected <code>reason</code> prop return non-null value and <code>TextField</code> must be displayed in <code>error</code> state. This can be used to render appropriate form error.<br><a href=\"https://next.material-ui-pickers.dev/guides/forms\">Read the guide</a> about form integration and error displaying.<br><br><strong>Signature:</strong><br><code>function(reason: TError, value: TInputValue) =&gt; void</code><br><em>reason:</em> The reason why the current value is not valid.<br><em>value:</em> The invalid value.",
+    "onError": "Callback that fired when input value or new <code>value</code> prop validation returns <strong>new</strong> validation error (or value is valid after error). In case of validation error detected <code>reason</code> prop return non-null value and <code>TextField</code> must be displayed in <code>error</code> state. This can be used to render appropriate form error.<br><a href=\"https://next.material-ui-pickers.dev/guides/forms\">Read the guide</a> about form integration and error displaying.<br><br><strong>Signature:</strong><br><code>function(reason: TError, value: TValue) =&gt; void</code><br><em>reason:</em> The reason why the current value is not valid.<br><em>value:</em> The invalid value.",
     "onMonthChange": "Callback firing on month change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(month: TDate) =&gt; void | Promise</code><br><em>month:</em> The new month.<br> <em>returns</em> (void | Promise): -",
     "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
     "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: CalendarPickerView) =&gt; void</code><br><em>view:</em> The new view.",