Merge

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>
+  );
+}

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

@@ -0,0 +1,77 @@
+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';
+import {
+  DatePicker,
+  DatePickerProps,
+  DatePickerFieldProps,
+} 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: DatePickerFieldProps<Dayjs>) {
+  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: React.UIEvent) => {
+    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: DatePickerProps<Dayjs>) {
+  return (
+    <DatePicker {...props} slots={{ ...props.slots, field: ButtonDateField }} />
+  );
+}
+
+export default function MaterialDatePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ButtonFieldDatePicker />
+    </LocalizationProvider>
+  );
+}

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

@@ -0,0 +1 @@
+<ButtonFieldDatePicker />

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

@@ -0,0 +1,82 @@
+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 { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
+import {
+  useSplitFieldProps,
+  useParsedFormat,
+  usePickersContext,
+} from '@mui/x-date-pickers/hooks';
+
+function ButtonDateRangeField(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: validateDateRange,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  const handleTogglePicker = (event) => {
+    if (pickersContext.open) {
+      pickersContext.onClose(event);
+    } else {
+      pickersContext.onOpen(event);
+    }
+  };
+
+  const formattedValue = (value ?? [null, null])
+    .map((date) => (date == null ? parsedFormat : date.format(format)))
+    .join(' – ');
+
+  return (
+    <Button
+      {...other}
+      variant="outlined"
+      color={hasValidationError ? 'error' : 'primary'}
+      ref={InputProps?.ref}
+      onClick={handleTogglePicker}
+    >
+      {label ? `${label}: ${formattedValue}` : formattedValue}
+    </Button>
+  );
+}
+
+// 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) {
+  return (
+    <DateRangePicker
+      {...props}
+      slots={{ ...props.slots, field: ButtonDateRangeField }}
+    />
+  );
+}
+
+export default function MaterialDateRangePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ButtonFieldDateRangePicker />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx

@@ -0,0 +1,86 @@
+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';
+import {
+  DateRangePicker,
+  DateRangePickerProps,
+  DateRangePickerFieldProps,
+} from '@mui/x-date-pickers-pro/DateRangePicker';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
+import {
+  useSplitFieldProps,
+  useParsedFormat,
+  usePickersContext,
+} from '@mui/x-date-pickers/hooks';
+
+function ButtonDateRangeField(props: DateRangePickerFieldProps<Dayjs>) {
+  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: validateDateRange,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  const handleTogglePicker = (event: React.UIEvent) => {
+    if (pickersContext.open) {
+      pickersContext.onClose(event);
+    } else {
+      pickersContext.onOpen(event);
+    }
+  };
+
+  const formattedValue = (value ?? [null, null])
+    .map((date) => (date == null ? parsedFormat : date.format(format)))
+    .join(' – ');
+
+  return (
+    <Button
+      {...other}
+      variant="outlined"
+      color={hasValidationError ? 'error' : 'primary'}
+      ref={InputProps?.ref}
+      onClick={handleTogglePicker}
+    >
+      {label ? `${label}: ${formattedValue}` : formattedValue}
+    </Button>
+  );
+}
+
+// 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>) {
+  return (
+    <DateRangePicker
+      {...props}
+      slots={{ ...props.slots, field: ButtonDateRangeField }}
+    />
+  );
+}
+
+export default function MaterialDateRangePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ButtonFieldDateRangePicker />
+    </LocalizationProvider>
+  );
+}