#DateTimePicker styling

20 messages · Page 1 of 1 (latest)

sweet solstice
#

Hello, so I am working on a DateTimePicker and i would like to change the background and the border colour of selected items to a custom one. I've spent almost 3h trying everything that i could using the documentation from this link:

https://mantine.dev/dates/date-time-picker/#open-picker-in-modal

But to no avail. Can someone here help me understand how i could make this? Or if it is even possible.

Thank you in advance

image.png
DateTimePicker | Mantine

Capture datetime from the user

rare notch
rare notch
#

Here is the example code

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import { MantineProvider } from '@mantine/core';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MantineProvider>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

// App.js
import {DateTimePicker} from "@mantine/dates"
import classes from "./date-picker.module.css";

function App() {
  return (
    <DateTimePicker  
      classNames={{
        day: classes.day
      }}
      timePickerProps={{
        classNames: {
          input: classes.timeInput,
          field: classes.timeField
        }}
      }
      />
  );
}

export default App;

// date-picker.module.css
.day[data-selected] {
    background-color: brown;
}

.timeInput {
    border-color: red;
}

.timeField {
    background-color: green;
}
#

Result

Screenshot_2026-01-08_at_4.39.04_PM.png
#

You should be able to style almost everything with it

sweet solstice
#

I did figure this out using the styles api documentation, but the part i am struggling with is changing the color of the active value, so for example if i want to change the hour, i would like for the hour only to have a different background color. The same for the minutes. And also when the hour/minute dropdown is opened, that is when I also need for the border do change color.

I don't know if I am explaining myself correctly -.-''

rare notch
#

Like this?

Screenshot_2026-01-08_at_5.38.15_PM.png
# 
<DateTimePicker  
  classNames={{
    day: classes.day
  }}
  timePickerProps={{
    withDropdown: true,
    classNames: {
      input: classes.timeInput,
      field: classes.timeField,
      control: classes.timeControl
    }}
  }
 />
#

Css

.day[data-selected] {
    background-color: brown;
}

.timeInput:focus-within {
    border-color: red;
}

.timeField:focus {
    background-color: red;
}

.timeControl[data-active] {
    background-color: blueviolet;
}
sweet solstice
#

precisely like that, i need to see what i did wrong on my side

#

thank you so much

#

ok, you need to use the props to give classnames to everything

#

what are the classes? are they like an enum with multiple empty string?

#

This is my component

  day: '',
  timeInput: '',
  timeField: '',
  timeControl: ''
};

case 'endDateTime':
        return usage?.endDateTime ? (
          <DateTimePicker
            classNames={{
              day: classes.day
            }}
            clearable
            label={lang.TRANSACTION_END_DATE}
            value={data?.endDateTime}
            defaultValue={data?.endDateTime ? formatTimeNSecLabel(data?.endDateTime) : undefined}
            onChange={handleEndDateChange}
            minDate={data?.beginDateTime ?? undefined}
            maxDate={getEndOfDay()}
            placeholder={lang.GLOBAL_PICK_A_DATE}
            valueFormat="DD/MM/YYYY HH:mm"
            timePickerProps={{
              withDropdown: true,
              popoverProps: { withinPortal: false },
              format: '24h',
              classNames: {
                input: classes.timeInput,
                field: classes.timeField,
                control: classes.timeControl
              }
            }}
          />
        ) : null;```
#

and this is what i have on my app.scss

# 
  .day[data-selected] {
    background-color: $zarph-color;
  }

  .timeInput:focus-within {
    border-color: $zarph-color;
  }

  .timeField:focus {
    background-color: $zarph-color;
  }

  .timeControl[data-active] {
    background-color: $zarph-color;
  }
}```
rare notch
#

classes are css module

# 
import classes from "./some-css-file.module.css"
wintry pine
#

Hi
Is there a way to not having weekend colored in red and have same as weekday ?

rare notch