[docs] Fix demonstration date to avoid hydratation errors (#6032)

mui · Sep 14, 2022 · 9c443b2 · 9c443b2
1 parent 5c4fa77
commit 9c443b2
Show file tree

Hide file tree

Showing 56 changed files with 74 additions and 75 deletions.
diff --git a/docs/data/date-pickers/custom-components/Tabs.js b/docs/data/date-pickers/custom-components/Tabs.js
@@ -19,7 +19,7 @@ const CustomTabs = (props) => (
 );
 
 export default function Tabs() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateTimePicker

diff --git a/docs/data/date-pickers/custom-components/Tabs.tsx b/docs/data/date-pickers/custom-components/Tabs.tsx
@@ -20,7 +20,7 @@ const CustomTabs = (props: DateTimePickerTabsProps) => (
 );
 
 export default function Tabs() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateTimePicker

diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.js b/docs/data/date-pickers/date-field/CustomDateFormat.js
@@ -6,7 +6,7 @@ import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
 import Stack from '@mui/material/Stack';
 
 export default function CustomDateFormat() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx b/docs/data/date-pickers/date-field/CustomDateFormat.tsx
@@ -6,7 +6,7 @@ import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
 import Stack from '@mui/material/Stack';
 
 export default function CustomDateFormat() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-field/CustomInputProps.js b/docs/data/date-pickers/date-field/CustomInputProps.js
@@ -8,7 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import CancelIcon from '@mui/icons-material/Close';
 
 export default function CustomInputProps() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-field/CustomInputProps.tsx b/docs/data/date-pickers/date-field/CustomInputProps.tsx
@@ -8,7 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import CancelIcon from '@mui/icons-material/Close';
 
 export default function CustomInputProps() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-field/CustomUIDateField.js b/docs/data/date-pickers/date-field/CustomUIDateField.js
@@ -42,7 +42,7 @@ const BrowserInputDateField = (props) => {
 };
 
 export default function CustomUIDateField() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   const handleChange = (newValue) => setValue(newValue);
 

diff --git a/docs/data/date-pickers/date-field/CustomUIDateField.tsx b/docs/data/date-pickers/date-field/CustomUIDateField.tsx
@@ -67,7 +67,7 @@ const BrowserInputDateField = (props: BrowserInputDateFieldProps) => {
 };
 
 export default function CustomUIDateField() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   const handleChange = (newValue: Dayjs | null) => setValue(newValue);
 

diff --git a/docs/data/date-pickers/date-field/DateFieldValue.js b/docs/data/date-pickers/date-field/DateFieldValue.js
@@ -6,12 +6,12 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
 
 export default function DateFieldValue() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={2} direction="row">
-        <DateField label="Uncontrolled field" defaultValue={dayjs()} />
+        <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-07')} />
         <DateField
           label="Controlled field"
           value={value}

diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx b/docs/data/date-pickers/date-field/DateFieldValue.tsx
@@ -6,12 +6,12 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
 
 export default function DateFieldValue() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={2} direction="row">
-        <DateField label="Uncontrolled field" defaultValue={dayjs()} />
+        <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-07')} />
         <DateField
           label="Controlled field"
           value={value}

diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview b/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview
@@ -1,6 +1,6 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
   <Stack spacing={2} direction="row">
-    <DateField label="Uncontrolled field" defaultValue={dayjs()} />
+    <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-07')} />
     <DateField
       label="Controlled field"
       value={value}

diff --git a/docs/data/date-pickers/date-field/DebouncedDateField.js b/docs/data/date-pickers/date-field/DebouncedDateField.js
@@ -11,7 +11,7 @@ import Button from '@mui/material/Button';
 const today = dayjs();
 
 export default function DebouncedDateField() {
-  const [value, setValue] = React.useState(() => today.add(1, 'week'));
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   const debounceSetValue = React.useMemo(() => debounce(setValue, 500), []);
 

diff --git a/docs/data/date-pickers/date-field/DebouncedDateField.tsx b/docs/data/date-pickers/date-field/DebouncedDateField.tsx
@@ -11,7 +11,7 @@ import Button from '@mui/material/Button';
 const today = dayjs();
 
 export default function DebouncedDateField() {
-  const [value, setValue] = React.useState<Dayjs | null>(() => today.add(1, 'week'));
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   const debounceSetValue = React.useMemo(() => debounce(setValue, 500), []);
 

diff --git a/docs/data/date-pickers/date-field/LocalizedDateField.js b/docs/data/date-pickers/date-field/LocalizedDateField.js
@@ -7,7 +7,7 @@ import Stack from '@mui/material/Stack';
 import 'dayjs/locale/fr';
 
 export default function LocalizedDateField() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">

diff --git a/docs/data/date-pickers/date-field/LocalizedDateField.tsx b/docs/data/date-pickers/date-field/LocalizedDateField.tsx
@@ -7,7 +7,7 @@ import Stack from '@mui/material/Stack';
 import 'dayjs/locale/fr';
 
 export default function LocalizedDateField() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">

diff --git a/docs/data/date-pickers/date-picker/CustomDay.js b/docs/data/date-pickers/date-picker/CustomDay.js
@@ -33,7 +33,7 @@ const CustomPickersDay = styled(PickersDay, {
 }));
 
 export default function CustomDay() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   const renderWeekPickerDay = (date, selectedDates, pickersDayProps) => {
     if (!value) {

diff --git a/docs/data/date-pickers/date-picker/CustomDay.tsx b/docs/data/date-pickers/date-picker/CustomDay.tsx
@@ -39,7 +39,7 @@ const CustomPickersDay = styled(PickersDay, {
 })) as React.ComponentType<CustomPickerDayProps>;
 
 export default function CustomDay() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   const renderWeekPickerDay = (
     date: Dayjs,

diff --git a/docs/data/date-pickers/date-picker/CustomInput.js b/docs/data/date-pickers/date-picker/CustomInput.js
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 export default function CustomInput() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/CustomInput.tsx b/docs/data/date-pickers/date-picker/CustomInput.tsx
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 export default function CustomInput() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/JalaliDatePicker.js b/docs/data/date-pickers/date-picker/JalaliDatePicker.js
@@ -5,7 +5,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 export default function JalaliDatePicker() {
-  const [value, setValue] = React.useState(new Date());
+  const [value, setValue] = React.useState(new Date(2022, 3, 7));
 
   return (
     <LocalizationProvider dateAdapter={AdapterJalali}>

diff --git a/docs/data/date-pickers/date-picker/JalaliDatePicker.tsx b/docs/data/date-pickers/date-picker/JalaliDatePicker.tsx
@@ -5,7 +5,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 export default function JalaliDatePicker() {
-  const [value, setValue] = React.useState<Date | null>(new Date());
+  const [value, setValue] = React.useState<Date | null>(new Date(2022, 3, 7));
 
   return (
     <LocalizationProvider dateAdapter={AdapterJalali}>

diff --git a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js
@@ -9,7 +9,7 @@ import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 
 export default function ResponsiveDatePickers() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx
@@ -9,7 +9,7 @@ import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 
 export default function ResponsiveDatePickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/ServerRequestDatePicker.js b/docs/data/date-pickers/date-picker/ServerRequestDatePicker.js
@@ -32,7 +32,7 @@ function fakeFetch(date, { signal }) {
   });
 }
 
-const initialValue = dayjs();
+const initialValue = dayjs('2022-04-07');
 
 export default function ServerRequestDatePicker() {
   const requestAbortController = React.useRef(null);

diff --git a/docs/data/date-pickers/date-picker/ServerRequestDatePicker.tsx b/docs/data/date-pickers/date-picker/ServerRequestDatePicker.tsx
@@ -32,7 +32,7 @@ function fakeFetch(date: Dayjs, { signal }: { signal: AbortSignal }) {
   });
 }
 
-const initialValue = dayjs();
+const initialValue = dayjs('2022-04-07');
 
 export default function ServerRequestDatePicker() {
   const requestAbortController = React.useRef<AbortController | null>(null);

diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
 export default function StaticDatePickerDemo() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
 export default function StaticDatePickerDemo() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js
@@ -12,7 +12,7 @@ const isWeekend = (date) => {
 };
 
 export default function StaticDatePickerLandscape() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx
@@ -12,7 +12,7 @@ const isWeekend = (date: Dayjs) => {
 };
 
 export default function StaticDatePickerLandscape() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/SubComponentsPickers.js b/docs/data/date-pickers/date-picker/SubComponentsPickers.js
@@ -11,7 +11,7 @@ const minDate = dayjs('2020-01-01T00:00:00.000');
 const maxDate = dayjs('2034-01-01T00:00:00.000');
 
 export default function SubComponentsPickers() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/SubComponentsPickers.tsx b/docs/data/date-pickers/date-picker/SubComponentsPickers.tsx
@@ -11,7 +11,7 @@ const minDate = dayjs('2020-01-01T00:00:00.000');
 const maxDate = dayjs('2034-01-01T00:00:00.000');
 
 export default function SubComponentsPickers() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/ViewsDatePicker.js b/docs/data/date-pickers/date-picker/ViewsDatePicker.js
@@ -7,7 +7,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 export default function ViewsDatePicker() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-picker/ViewsDatePicker.tsx b/docs/data/date-pickers/date-picker/ViewsDatePicker.tsx
@@ -7,7 +7,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 export default function ViewsDatePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js
@@ -6,17 +6,18 @@ import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Unstable_SingleInputDateRangeField as SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 
-const today = dayjs();
-
 export default function DateRangeFieldValue() {
-  const [value, setValue] = React.useState(() => [today, today.add(1, 'week')]);
+  const [value, setValue] = React.useState(() => [
+    dayjs('2022-04-07'),
+    dayjs('2022-04-13'),
+  ]);
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={2} direction="row">
         <SingleInputDateRangeField
           label="Uncontrolled field"
-          defaultValue={[today, today.add(1, 'week')]}
+          defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-13')]}
         />
         <SingleInputDateRangeField
           label="Controlled field"

diff --git a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx
@@ -6,20 +6,18 @@ import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Unstable_SingleInputDateRangeField as SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 
-const today = dayjs();
-
 export default function DateRangeFieldValue() {
   const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
-    today,
-    today.add(1, 'week'),
+    dayjs('2022-04-07'),
+    dayjs('2022-04-13'),
   ]);
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Stack spacing={2} direction="row">
         <SingleInputDateRangeField
           label="Uncontrolled field"
-          defaultValue={[today, today.add(1, 'week')]}
+          defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-13')]}
         />
         <SingleInputDateRangeField
           label="Controlled field"

diff --git a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx.preview b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx.preview
@@ -2,7 +2,7 @@
   <Stack spacing={2} direction="row">
     <SingleInputDateRangeField
       label="Uncontrolled field"
-      defaultValue={[today, today.add(1, 'week')]}
+      defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-13')]}
     />
     <SingleInputDateRangeField
       label="Controlled field"

diff --git a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.js
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 
 export default function BasicDateTimePicker() {
-  const [value, setValue] = React.useState(dayjs());
+  const [value, setValue] = React.useState(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

diff --git a/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx b/docs/data/date-pickers/date-time-picker/BasicDateTimePicker.tsx
@@ -6,7 +6,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 
 export default function BasicDateTimePicker() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>