How can I change teh background color of a selected shortcut item in the staticDateRangePicker?
For example when I click on button today and it is selected I want the background color to be ‘grey’ to let the user know it is being filtered.
Date picker
<code>import { Box, Button } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import dayjs, { Dayjs } from 'dayjs';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { getEndOfDay } from '@/helpers/getEndOfDay';
import { getStartOfDay } from '@/helpers/getStartOfDay';
import useStore from '@/hooks/useStore';
const getShortcutsItems = (
setDashboardDefaultStartDate: (date: Dayjs | null) => void,
setDashboardDefaultEndDate: (date: Dayjs | null) => void
): PickersShortcutsItem<DateRange<Dayjs>>[] => [
{
label: 'Today',
getValue: () => {
const start = getStartOfDay(dayjs());
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Weeks',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'week').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '1 Month',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(1, 'month').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Months',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'month').add(2, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: 'All',
getValue: () => {
setDashboardDefaultStartDate(null);
setDashboardDefaultEndDate(null);
return [null, null];
},
},
];
interface DateRangePickerProps {
handlePickerClose: () => void;
}
const DateRangePicker = ({ handlePickerClose }: DateRangePickerProps) => {
const {
uiStore: {
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
setFilterStartDate,
setFilterEndDate,
setDashboardDefaultStartDate,
setDashboardDefaultEndDate,
},
} = useStore();
useEffect(() => {
setComponentFilterStartDate(filterStartDate ?? dashboardDefaultStartDate);
setComponentFilterEndDate(filterEndDate ?? dashboardDefaultEndDate);
}, [
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
]);
const [componentFilterStartDate, setComponentFilterStartDate] =
useState<null | Dayjs>(null);
const [componentFilterEndDate, setComponentFilterEndDate] =
useState<null | Dayjs>(null);
const [showMonthCalendar, setShowMonthCalendar] = useState(false);
const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
);
const handleDataChange = (date: DateRange<Dayjs>) => {
const isOnlyOneDaySelected = dayjs(date[0]).isSame(date[1], 'day');
setShowMonthCalendar(false);
setFilterStartDate(date[0]);
if (isOnlyOneDaySelected) {
setFilterEndDate(getEndOfDay(date[0] as Dayjs));
} else {
setFilterEndDate(date[1]);
}
};
const handleMonthChange = (date: Dayjs) => {
setShowMonthCalendar(false);
setFilterStartDate(date.startOf('month'));
setFilterEndDate(date.endOf('month'));
};
return (
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
position: 'absolute',
color: 'white',
backgroundColor: 'transparent',
top: 20,
left: 20,
width: 170,
height: 20,
cursor: 'pointer',
zIndex: 100,
}}
onClick={() => {
setShowMonthCalendar(!showMonthCalendar);
}}
></Box>
{showMonthCalendar ? (
<Box
sx={{
position: 'absolute',
zIndex: 100,
height: 350,
backgroundColor: 'black',
}}
>
<DateCalendar
onMonthChange={handleMonthChange}
defaultValue={filterStartDate ?? dayjs()}
views={['year', 'month']}
minDate={dayjs('2010-01-01')}
maxDate={dayjs()}
openTo="month"
/>
</Box>
) : null}
<StaticDateRangePicker
showDaysOutsideCurrentMonth={true}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('ddd')}`}
value={[componentFilterStartDate, componentFilterEndDate]}
onChange={handleDataChange}
slotProps={{
layout: {
sx: {
[`.${pickersLayoutClasses.shortcuts}`]: {
gridColumn: 3,
backgroundColor: '#ffffff08',
paddingTop: '60px',
width: 145,
},
[`.MuiButtonBase-root`]: {
borderRadius: '20px',
textTransform: 'none',
},
[`.MuiChip-root`]: {
color: '#FAFAFA',
fontSize: 16,
border: '1px solid #FAFAFA',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'grey',
},
},
[`.MuiListItem-root`]: {
pb: '15px',
},
},
},
toolbar: {
hidden: true,
},
shortcuts: {
items: shortcutsItems,
},
actionBar: {
actions: [],
},
}}
/>
<Box sx={{ backgroundColor: '#181623' }}>
<Button
sx={{
width: '1em',
backgroundColor: 'red',
display: 'flex',
ml: 'auto',
mr: 1.8,
mb: 2,
'&:hover': {
backgroundColor: 'red',
},
}}
onClick={() => {
handlePickerClose();
}}
>
Apply
</Button>
</Box>
</Box>
</LocalizationProvider>
</Box>
);
};
export default observer(DateRangePicker);
</code>
<code>import { Box, Button } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import dayjs, { Dayjs } from 'dayjs';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { getEndOfDay } from '@/helpers/getEndOfDay';
import { getStartOfDay } from '@/helpers/getStartOfDay';
import useStore from '@/hooks/useStore';
const getShortcutsItems = (
setDashboardDefaultStartDate: (date: Dayjs | null) => void,
setDashboardDefaultEndDate: (date: Dayjs | null) => void
): PickersShortcutsItem<DateRange<Dayjs>>[] => [
{
label: 'Today',
getValue: () => {
const start = getStartOfDay(dayjs());
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Weeks',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'week').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '1 Month',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(1, 'month').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Months',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'month').add(2, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: 'All',
getValue: () => {
setDashboardDefaultStartDate(null);
setDashboardDefaultEndDate(null);
return [null, null];
},
},
];
interface DateRangePickerProps {
handlePickerClose: () => void;
}
const DateRangePicker = ({ handlePickerClose }: DateRangePickerProps) => {
const {
uiStore: {
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
setFilterStartDate,
setFilterEndDate,
setDashboardDefaultStartDate,
setDashboardDefaultEndDate,
},
} = useStore();
useEffect(() => {
setComponentFilterStartDate(filterStartDate ?? dashboardDefaultStartDate);
setComponentFilterEndDate(filterEndDate ?? dashboardDefaultEndDate);
}, [
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
]);
const [componentFilterStartDate, setComponentFilterStartDate] =
useState<null | Dayjs>(null);
const [componentFilterEndDate, setComponentFilterEndDate] =
useState<null | Dayjs>(null);
const [showMonthCalendar, setShowMonthCalendar] = useState(false);
const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
);
const handleDataChange = (date: DateRange<Dayjs>) => {
const isOnlyOneDaySelected = dayjs(date[0]).isSame(date[1], 'day');
setShowMonthCalendar(false);
setFilterStartDate(date[0]);
if (isOnlyOneDaySelected) {
setFilterEndDate(getEndOfDay(date[0] as Dayjs));
} else {
setFilterEndDate(date[1]);
}
};
const handleMonthChange = (date: Dayjs) => {
setShowMonthCalendar(false);
setFilterStartDate(date.startOf('month'));
setFilterEndDate(date.endOf('month'));
};
return (
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
position: 'absolute',
color: 'white',
backgroundColor: 'transparent',
top: 20,
left: 20,
width: 170,
height: 20,
cursor: 'pointer',
zIndex: 100,
}}
onClick={() => {
setShowMonthCalendar(!showMonthCalendar);
}}
></Box>
{showMonthCalendar ? (
<Box
sx={{
position: 'absolute',
zIndex: 100,
height: 350,
backgroundColor: 'black',
}}
>
<DateCalendar
onMonthChange={handleMonthChange}
defaultValue={filterStartDate ?? dayjs()}
views={['year', 'month']}
minDate={dayjs('2010-01-01')}
maxDate={dayjs()}
openTo="month"
/>
</Box>
) : null}
<StaticDateRangePicker
showDaysOutsideCurrentMonth={true}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('ddd')}`}
value={[componentFilterStartDate, componentFilterEndDate]}
onChange={handleDataChange}
slotProps={{
layout: {
sx: {
[`.${pickersLayoutClasses.shortcuts}`]: {
gridColumn: 3,
backgroundColor: '#ffffff08',
paddingTop: '60px',
width: 145,
},
[`.MuiButtonBase-root`]: {
borderRadius: '20px',
textTransform: 'none',
},
[`.MuiChip-root`]: {
color: '#FAFAFA',
fontSize: 16,
border: '1px solid #FAFAFA',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'grey',
},
},
[`.MuiListItem-root`]: {
pb: '15px',
},
},
},
toolbar: {
hidden: true,
},
shortcuts: {
items: shortcutsItems,
},
actionBar: {
actions: [],
},
}}
/>
<Box sx={{ backgroundColor: '#181623' }}>
<Button
sx={{
width: '1em',
backgroundColor: 'red',
display: 'flex',
ml: 'auto',
mr: 1.8,
mb: 2,
'&:hover': {
backgroundColor: 'red',
},
}}
onClick={() => {
handlePickerClose();
}}
>
Apply
</Button>
</Box>
</Box>
</LocalizationProvider>
</Box>
);
};
export default observer(DateRangePicker);
</code>
import { Box, Button } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import dayjs, { Dayjs } from 'dayjs';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { getEndOfDay } from '@/helpers/getEndOfDay';
import { getStartOfDay } from '@/helpers/getStartOfDay';
import useStore from '@/hooks/useStore';
const getShortcutsItems = (
setDashboardDefaultStartDate: (date: Dayjs | null) => void,
setDashboardDefaultEndDate: (date: Dayjs | null) => void
): PickersShortcutsItem<DateRange<Dayjs>>[] => [
{
label: 'Today',
getValue: () => {
const start = getStartOfDay(dayjs());
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Weeks',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'week').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '1 Month',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(1, 'month').add(1, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: '2 Months',
getValue: () => {
const start = getStartOfDay(dayjs().subtract(2, 'month').add(2, 'day'));
const end = getEndOfDay(dayjs());
return [start, end];
},
},
{
label: 'All',
getValue: () => {
setDashboardDefaultStartDate(null);
setDashboardDefaultEndDate(null);
return [null, null];
},
},
];
interface DateRangePickerProps {
handlePickerClose: () => void;
}
const DateRangePicker = ({ handlePickerClose }: DateRangePickerProps) => {
const {
uiStore: {
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
setFilterStartDate,
setFilterEndDate,
setDashboardDefaultStartDate,
setDashboardDefaultEndDate,
},
} = useStore();
useEffect(() => {
setComponentFilterStartDate(filterStartDate ?? dashboardDefaultStartDate);
setComponentFilterEndDate(filterEndDate ?? dashboardDefaultEndDate);
}, [
filterStartDate,
filterEndDate,
dashboardDefaultStartDate,
dashboardDefaultEndDate,
]);
const [componentFilterStartDate, setComponentFilterStartDate] =
useState<null | Dayjs>(null);
const [componentFilterEndDate, setComponentFilterEndDate] =
useState<null | Dayjs>(null);
const [showMonthCalendar, setShowMonthCalendar] = useState(false);
const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
);
const handleDataChange = (date: DateRange<Dayjs>) => {
const isOnlyOneDaySelected = dayjs(date[0]).isSame(date[1], 'day');
setShowMonthCalendar(false);
setFilterStartDate(date[0]);
if (isOnlyOneDaySelected) {
setFilterEndDate(getEndOfDay(date[0] as Dayjs));
} else {
setFilterEndDate(date[1]);
}
};
const handleMonthChange = (date: Dayjs) => {
setShowMonthCalendar(false);
setFilterStartDate(date.startOf('month'));
setFilterEndDate(date.endOf('month'));
};
return (
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
position: 'absolute',
color: 'white',
backgroundColor: 'transparent',
top: 20,
left: 20,
width: 170,
height: 20,
cursor: 'pointer',
zIndex: 100,
}}
onClick={() => {
setShowMonthCalendar(!showMonthCalendar);
}}
></Box>
{showMonthCalendar ? (
<Box
sx={{
position: 'absolute',
zIndex: 100,
height: 350,
backgroundColor: 'black',
}}
>
<DateCalendar
onMonthChange={handleMonthChange}
defaultValue={filterStartDate ?? dayjs()}
views={['year', 'month']}
minDate={dayjs('2010-01-01')}
maxDate={dayjs()}
openTo="month"
/>
</Box>
) : null}
<StaticDateRangePicker
showDaysOutsideCurrentMonth={true}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('ddd')}`}
value={[componentFilterStartDate, componentFilterEndDate]}
onChange={handleDataChange}
slotProps={{
layout: {
sx: {
[`.${pickersLayoutClasses.shortcuts}`]: {
gridColumn: 3,
backgroundColor: '#ffffff08',
paddingTop: '60px',
width: 145,
},
[`.MuiButtonBase-root`]: {
borderRadius: '20px',
textTransform: 'none',
},
[`.MuiChip-root`]: {
color: '#FAFAFA',
fontSize: 16,
border: '1px solid #FAFAFA',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'grey',
},
},
[`.MuiListItem-root`]: {
pb: '15px',
},
},
},
toolbar: {
hidden: true,
},
shortcuts: {
items: shortcutsItems,
},
actionBar: {
actions: [],
},
}}
/>
<Box sx={{ backgroundColor: '#181623' }}>
<Button
sx={{
width: '1em',
backgroundColor: 'red',
display: 'flex',
ml: 'auto',
mr: 1.8,
mb: 2,
'&:hover': {
backgroundColor: 'red',
},
}}
onClick={() => {
handlePickerClose();
}}
>
Apply
</Button>
</Box>
</Box>
</LocalizationProvider>
</Box>
);
};
export default observer(DateRangePicker);
I have tried updating my shortcutsItems but that did not work and I get error on .getValue()
<code>const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
).map((item) => ({
...item,
onClick: () => {
const dateRange = item.getValue();
if (Array.isArray(dateRange)) {
handleDataChange(dateRange);
}
setSelectedLabel(item.label);
},
sx: {
backgroundColor: selectedLabel === item.label ? 'grey' : 'transparent',
'&:hover': {
backgroundColor: selectedLabel === item.label ? 'darkgrey' : 'grey',
},
},
}));
</code>
<code>const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
).map((item) => ({
...item,
onClick: () => {
const dateRange = item.getValue();
if (Array.isArray(dateRange)) {
handleDataChange(dateRange);
}
setSelectedLabel(item.label);
},
sx: {
backgroundColor: selectedLabel === item.label ? 'grey' : 'transparent',
'&:hover': {
backgroundColor: selectedLabel === item.label ? 'darkgrey' : 'grey',
},
},
}));
</code>
const shortcutsItems = getShortcutsItems(
setDashboardDefaultStartDate,
setDashboardDefaultEndDate
).map((item) => ({
...item,
onClick: () => {
const dateRange = item.getValue();
if (Array.isArray(dateRange)) {
handleDataChange(dateRange);
}
setSelectedLabel(item.label);
},
sx: {
backgroundColor: selectedLabel === item.label ? 'grey' : 'transparent',
'&:hover': {
backgroundColor: selectedLabel === item.label ? 'darkgrey' : 'grey',
},
},
}));
New contributor
Luigi Matias is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.