[DateRangePicker] Add shortcut info in Date Range Picker to the field

[david-ic3]

The problem in depth

The goal is to have a similar feature as the range picker from Google Analytics :

You can see how the shortcut is also visible to the end user when the range date picker is used (it's integrated into the model). It's visible also when the calendar is closed.

I've seen you have an example with shortcuts in a range picker here : https://codesandbox.io/p/sandbox/shortcuts-changeimportance-overall-58q5gk

some help on how to do this is appreciated

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: shortcut range picker
Order ID: #19458

[michelengelen]

This should be possible when you follow the layout docs section.

With this you can customize how the elements are placed and even add your proprietary elements to it. It should be possible to add a DateRangeField component as well.

All of it should be controlled by a single state so that changes are reflected on each part of the layout.

[david-ic3]

@michelengelen , could you please be more specific (looks like a polite RTFM, we have a paying support) ?

[michelengelen]

Sure thing.
I have built a quick example of what I wanted to showcase.
With the custom layout you can basically juggle around the elements, or even build your own that you can then render at specific places around that layout.

Here is the example: Custom Layout

This is purely a showcase and is far from perfect in terms of styling, etc.

[michelengelen]

anything to add here @LukasTy?

[david-ic3]

@michelengelen , our question is how to get the information when the calendar is closed of the shortcut used in the fields

[michelengelen]

@michelengelen , our question is how to get the information when the calendar is closed of the shortcut used in the fields

OK, what do you mean by that? 🤷🏼
If you want to know the span from the range value you can either calculate that or store it together with the range when you click on one of the shortcuts.

[david-ic3]

@michelengelen , the question is how to add the shortcut information in the date range field, not in the date range calendar

hope it helps

[michelengelen]

@david-ic3 yes, that helps.
The initial description was misleading.
So, there are still a few different ways to do this.
To be fully independent to the shortcuts you can just calc the diff yourself, like this:

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import InputAdornment from '@mui/material/InputAdornment';
import Chip from '@mui/material/Chip';

export default function DateRangeFieldValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
    dayjs().subtract(7, 'day'),
    dayjs(),
  ]);

  const getShortcutLabel = () => {
    // do the calc to define the label here
    const today = dayjs();
    const isStartToday = value[0]?.isSame(today, 'day');
    const isEndToday = value[1]?.isSame(today, 'day');
    const daysDiff = value[0]?.diff(value[1], 'day');
    console.log('daysdiff', daysDiff);
    switch (true) {
      case isEndToday && daysDiff === -7:
        return 'Last 7 days';
      case isStartToday && daysDiff === 7:
        return 'Next 7 days';
    }
  };

  const ShortcutAdornment = () => {
    const label = getShortcutLabel();
    console.log('label', label);
    if (!label) return null;
    return (
      <InputAdornment position="start">
        <Chip size="small" label={label} />
      </InputAdornment>
    );
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['SingleInputDateRangeField']}>
        <SingleInputDateRangeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
          slotProps={{
            textField: {
              InputProps: {
                startAdornment: <ShortcutAdornment />,
              },
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Or, if you want to use the shortcuts and only show it when you clicked one of those, you can store the shortcut value and label in a wrapper around the DateRangePicker, customize it with the previous example and make it controlled, so that the value has a single place to live in.

Hope that helps.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.