diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md
index 1875037ac5bf..e5605eb8ddc9 100644
--- a/docs/data/common-concepts/custom-components/custom-components.md
+++ b/docs/data/common-concepts/custom-components/custom-components.md
@@ -105,7 +105,7 @@ you can declare your component using the `PropsFromSlot` interface:
 ```tsx
 function CustomCalendarHeader({
   currentMonth,
-}: PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']>) {
+}: PropsFromSlot<DateCalendarSlots['calendarHeader']>) {
   return <div>{currentMonth?.format('MM-DD-YYYY')}</div>;
 }
 ```
@@ -129,7 +129,7 @@ import { DateCalendarSlots } from '@mui/x-date-pickers';
 type ToolbarProps = PropsFromSlot<GridSlots['toolbar']>;
 
 // Most of the picker slots interfaces need to receive the date type as a generic.
-type CalendarHeaderProps = PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']>;
+type CalendarHeaderProps = PropsFromSlot<DateCalendarSlots['calendarHeader']>;
 ```
 
 :::
@@ -140,7 +140,7 @@ If you are passing additional props to your slot, you can add them to the props
 
 ```ts
 interface CustomCalendarHeaderProps
-  extends PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']> {
+  extends PropsFromSlot<DateCalendarSlots['calendarHeader']> {
   displayWeekNumber: boolean;
   setDisplayWeekNumber: (displayWeekNumber: boolean) => void;
 }
@@ -178,14 +178,13 @@ function MyApp() {
     <DateCalendar
       displayWeekNumber={displayWeekNumber}
       slots={{
-        calendarHeader:
-          CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+        calendarHeader: CustomCalendarHeader as DateCalendarSlots['calendarHeader'],
       }}
       slotProps={{
         calendarHeader: {
           displayWeekNumber,
           setDisplayWeekNumber,
-        } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+        } as DateCalendarSlotProps['calendarHeader'],
       }}
     />
   );
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
index 11da4bc2ba23..6082f6580ca7 100644
--- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Button from '@mui/material/Button';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
index 1f31f5d63e6a..ae9ffb08d896 100644
--- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import Button from '@mui/material/Button';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -15,7 +14,7 @@ import {
   usePickersContext,
 } from '@mui/x-date-pickers/hooks';
 
-function ButtonDateField(props: DatePickerFieldProps<Dayjs>) {
+function ButtonDateField(props: DatePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { value, timezone, format } = internalProps;
   const {
@@ -62,7 +61,7 @@ function ButtonDateField(props: DatePickerFieldProps<Dayjs>) {
   );
 }
 
-function ButtonFieldDatePicker(props: DatePickerProps<Dayjs>) {
+function ButtonFieldDatePicker(props: DatePickerProps) {
   return (
     <DatePicker {...props} slots={{ ...props.slots, field: ButtonDateField }} />
   );
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
index bc154d9a2b9f..6c187cd87798 100644
--- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
+++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -16,7 +16,7 @@ import {
   usePickersContext,
 } from '@mui/x-date-pickers/hooks';
 
-function ButtonDateRangeField(props: DateRangePickerFieldProps<Dayjs>) {
+function ButtonDateRangeField(props: DateRangePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { value, timezone, format } = internalProps;
   const {
@@ -49,7 +49,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps<Dayjs>) {
   };
 
   const formattedValue = (value ?? [null, null])
-    .map((date) => (date == null ? parsedFormat : date.format(format)))
+    .map((date) => (date == null ? parsedFormat : (date as Dayjs).format(format)))
     .join(' – ');
 
   return (
@@ -68,7 +68,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps<Dayjs>) {
 // TODO v8: Will be removed before the end of the alpha since single input will become the default field.
 ButtonDateRangeField.fieldType = 'single-input';
 
-function ButtonFieldDateRangePicker(props: DateRangePickerProps<Dayjs>) {
+function ButtonFieldDateRangePicker(props: DateRangePickerProps) {
   return (
     <DateRangePicker
       {...props}