Cannot make all filters work for a column of dates

[BrokeUniStudent]

I was trying to make all filters work in a date column. I have tried two ways so far but neither produced satisfying results.

1. Copy from the docs. My version. All filters worked except the 'between' filters, as the lower and upper bound datetime pickers are using the same filter value.
2. I then refactored the filter to show two pickers using different values when the filter is 'between', but the pickers were both replicated and displayed. See Code Sandbox.

Is there a way that I can make all filters work on a date column?

[MarkusEllyton]

MRT handles making two instances of your Filter component when it's a range, so the first example just needs to be adjusted slightly to work with ranges.

To distinguish between the two generated components, a rangeFilterIndex is passed to the Filter-instance. So you'd need to do something like this in the range case

Filter: ({ column, rangeFilterIndex }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
            onChange={(newValue) => {
                column.setFilterValue((oldValues) => {
                    // Update the correct index of the filter value
                    const newValues = oldValues ?? ["", ""];
                    newValues[rangeFilterIndex] = newValue;

                    return newValues;
                });
            }}
            renderInput={(params) => (
                <TextField
                    {...params}
                    helperText={"Filter mode: " + column.getFilterFn().name}
                    sx={{ minWidth: "120px" }}
                    variant="standard"
                />
            )}
            value={column.getFilterValue()?.[rangeFilterIndex] || null} // Index into the filter value
        />
    </LocalizationProvider>
);

If the filter variant is not a range, rangeFilterIndex is undefined, so that case should be handled as well.

[BrokeUniStudent]

Thank you very much! This solves my problem perfectly

[BrokeUniStudent]

Here is a complete answer.

Filter: ({ column, rangeFilterIndex }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateTimePicker
          onChange={newValue => {
            column.setFilterValue(oldValues => {
              if (typeof rangeFilterIndex === 'undefined') {
                return newValue;
              }
              const newValues = oldValues ?? ['', ''];
              newValues[rangeFilterIndex] = newValue;
              return newValues;
            });
          }}
          renderInput={params => (
            <TextField
              {...params}
              helperText={'Filter mode: ' + getFilterFn().name}
              sx={{ width: '250px' }}
              variant="standard"
            />
          )}
          value={
            typeof rangeFilterIndex !== 'undefined'
              ? column.getFilterValue()?.[rangeFilterIndex] || [null, null] // Index into the filter value
              : column.getFilterValue() || null
          }
        />
    </LocalizationProvider>
);