[pickers] How to add custom type to slotProps of DateRangePicker

[svidskiy]

The problem in depth

How to type slotProps for field and provide setOpen? Without as any

I use button instead of input.

ype PresetDateRangePickerProps = DateRangePickerProps<Dayjs> & {
    presets?: PresetItem[];
};

export const PresetDateRangePicker = ({
    presets = INITIAL_PRESETS,
    onChange,
    ...props
}: PresetDateRangePickerProps) => {
    const [open, setOpen] = useState<boolean>(false);

    return (
        <DateRangePicker
            slots={{
                ...props.slots,
                field: RangeButton,
                shortcuts: RangeShortcuts
            }}
            slotProps={{
                field: {
                    ...props.slotProps?.field,
                    setOpen
                } as any,
                shortcuts: {
                    ...props.slotProps?.shortcuts,
                    items: presets
                },
                ...props.slotProps
            }}
            onChange={onChange}
            open={open}
            onClose={() => setOpen(false)}
            onOpen={() => setOpen(true)}
            {...props}
        />
    );
};

Button

export type RangeButtonProps = SingleInputDateRangeFieldProps<Dayjs> & {
    setOpen?: Dispatch<SetStateAction<boolean>>;
};

export const RangeButton = forwardRef<HTMLButtonElement, RangeButtonProps>(
    (
        { InputProps: { ref: containerRef } = {}, setOpen, disabled, value: [start, end] = [null, null] },
        ref
    ) => {
        const handleRef = useForkRef(containerRef, ref);

        return (
            <Button
                variant='outlined'
                ref={handleRef}
                disabled={disabled}
                onClick={() => setOpen?.((previous) => !previous)}
            >
                {fDate(start) || 'Start date'} - {fDate(end) || 'End date'}
            </Button>
        );
    }
) as ForwardRefExoticComponent<RangeButtonProps & RefAttributes<HTMLButtonElement>> & {
    fieldType: FieldType;
};

RangeButton.fieldType = 'single-input';
RangeButton.displayName = 'RangeButton';

Your environment

``` System: OS: macOS 15.3 Binaries: Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm pnpm: 9.15.4 - /opt/homebrew/bin/pnpm Browsers: Chrome: 133.0.6943.98 Edge: Not Found Safari: 18.3 npmPackages: @emotion/react: ^11.13.0 => 11.14.0 @emotion/styled: ^11.13.0 => 11.14.0 @mui/icons-material: ^6.2.0 => 6.3.1 @mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.175 @mui/material: ^5.16.7 => 5.16.14 @mui/x-data-grid: ^7.23.2 => 7.23.6 @mui/x-data-grid-pro: ^7.23.2 => 7.23.6 @mui/x-date-pickers: ^7.23.2 => 7.23.6 @mui/x-date-pickers-pro: ^7.23.2 => 7.23.6 @mui/x-license: ^7.23.2 => 7.23.6 @mui/x-tree-view: ^7.23.2 => 7.23.6 @types/react: ^18.3.4 => 18.3.18 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.4 => 5.7.3 ```

Search keywords: date-range-picker

Order ID: 89766

[michelengelen]

Hey @svidskiy ... I don't think that this is possible.
In the data grid we use module augmentation and a SlotPropsOverride for each slot, but this is not the case for the pickers. Here the types are also a lot more complicated, so a simple override would not be possible.

Maybe @flaviendelangle knows of a way?

[LukasTy]

This looks like a duplicate of #9775.
I'm closing this issue; feel free to follow the mentioned issue to get notified when it is fixed. 😉

We have not prioritized adding module augmentation yet.

For now, the only suggestion is to cast the types to any or a more specific type. 🙈

[flaviendelangle]

We are currently cleaning the prop we pass internally to the slots.
This is part of a big effort to have a better customization experience and I think it should help enable the type overrides at some point.