So I am adding Mantine DatePicker in my webapp.
I want to customise the default style when user selects the date.
Current style:
What I am looking for:
Going through the documentation of Mantine DatePicker here, I learnt about getDayProps
which can help me to add styles to date but I am not sure how can i do that?
Till now I have done like this which changes color on hovering the date:
<DatePicker
value={value}
onChange={setValue}
getDayProps={() => {
return {
sx: (theme) => ({
backgroundColor: theme.colors.red[6],
color: theme.black,
...theme.fn.hover({
backgroundColor: theme.colors.violet[7],
color: theme.white,
}),
}),
};
}}
/>
2
Answers
So I got how to do it:
For just
Date Picker
:For
DatePicker
withtype="range"
:You can explore more in DatePicker Styles API Also, see How to use Mantine Styles API
you can change color of selected date using overwrite CSS class .mantine-DatePicker-day[data-selected]
add below code in your css
I hope this will work for you.