[docs] Apply the new DX to the Button Field demos (#14860)

Signed-off-by: Michel Engelen <[email protected]>
Signed-off-by: Gene Arch <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Michel Engelen <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>
Co-authored-by: Gene Arch <[email protected]>
Co-authored-by: Rom Grk <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]>
Co-authored-by: Sycamore <[email protected]>

docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js

@@ -0,0 +1,73 @@
+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';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+import {
+  useSplitFieldProps,
+  useParsedFormat,
+  usePickersContext,
+} from '@mui/x-date-pickers/hooks';
+
+function ButtonDateField(props) {
+  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+  const { value, timezone, format } = internalProps;
+  const {
+    InputProps,
+    slotProps,
+    slots,
+    ownerState,
+    label,
+    focused,
+    name,
+    ...other
+  } = forwardedProps;
+
+  const pickersContext = usePickersContext();
+
+  const parsedFormat = useParsedFormat(internalProps);
+  const { hasValidationError } = useValidation({
+    validator: validateDate,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  const handleTogglePicker = (event) => {
+    if (pickersContext.open) {
+      pickersContext.onClose(event);
+    } else {
+      pickersContext.onOpen(event);
+    }
+  };
+
+  const valueStr = value == null ? parsedFormat : value.format(format);
+
+  return (
+    <Button
+      {...other}
+      variant="outlined"
+      color={hasValidationError ? 'error' : 'primary'}
+      ref={InputProps?.ref}
+      onClick={handleTogglePicker}
+    >
+      {label ? `${label}: ${valueStr}` : valueStr}
+    </Button>
+  );
+}
+
+function ButtonFieldDatePicker(props) {
+  return (
+    <DatePicker {...props} slots={{ ...props.slots, field: ButtonDateField }} />
+  );
+}
+
+export default function MaterialDatePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ButtonFieldDatePicker />
+    </LocalizationProvider>
+  );
+}