CODEWITHSUNDEEP
javascriptcssreactjsnext.jsmantine
Ashutosh Dash
Ashutosh Dash

Reputation: 654

How to customize selected date styles in Mantine DatePicker?

So I am adding Mantine DatePicker in my webapp. I want to customise the default style when user selects the date.

Current style:

Current style of selected date

What I am looking for:

What I want

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,
                }),
              }),
            };
          }}
        />

Upvotes: 1

Views: 5676

Answers (3)

dzmoxn
dzmoxn

Reputation: 38

Here's how to customize the selected day and range colors in Mantine DatePicker v7:

import { DatePicker } from '@mantine/dates';
import { DatePicker } from '@mantine/dates';

<DatePicker
  type="range"
  numberOfColumns={3}
  value={value}
  onChange={setValue}
  minDate={new Date(new Date().setDate(new Date().getDate() + 1))}
  classNames={{
    day: 'data-[selected]:bg-[#405f84] data-[selected]:text-white data-[in-range]:bg-[#77f78d] data[selected]:hover:bg-[#405f84]'
  }}
/>
  • data-[selected]: Styles the selected dates
  • data-[in-range]: Stylesdates between selected range

Based on Mantine Documentation

Upvotes: 0

Ashutosh Dash
Ashutosh Dash

Reputation: 654

So I got how to do it:

For just Date Picker:

<DatePicker
  date={date}
  onDateChange={setDate}
  value={value}
  onChange={handleChange}
  styles={{
    day: {
      "&[data-selected], &[data-selected]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
      },
    },
  }}
/>

For DatePicker with type="range":

<DatePickerInput
  type="range"
  valueFormat="DD MMM, YY"
  value={value}
  onChange={setValue}
  numberOfColumns={2}
  placeholder="Pick dates range"
  styles={{
    day: {
      "&[data-selected], &[data-selected]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
      },

      "&[data-in-range], &[data-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "0.5",
      },

      "&[data-first-in-range], &[data-first-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "1",
      },

      "&[data-last-in-range], &[data-last-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "1",
      },
    },
    input: {
      "&:focus": {
        borderColor: accentColor,
      },
    },
  }}
/>

You can explore more in DatePicker Styles API Also, see How to use Mantine Styles API

Upvotes: 3

hasti kukadiya
hasti kukadiya

Reputation: 55

you can change color of selected date using overwrite CSS class .mantine-DatePicker-day[data-selected]

add below code in your css

.mantine-DatePicker-day[data-selected]{
  background-color: #7048E8 !important;
}

I hope this will work for you.

Upvotes: 0

Related Questions