DatePickerInput - no dropdown API

[rafalsza]

Hi!
How can I customize dropdown element in DatePickerInput ?
There is no dropdown in Styles API

[rafalsza]

[AnnMarieW]

Hi @rafalsza

See an example here: https://www.dash-mantine-components.com/styles-api#datepickerinput

Also, you can use popoverProps and see the Popover section of the docs for more information.

popoverProps Props passed down to Popover component. dict

[rafalsza]

i've tried with popoverprops but not working for .mantine-popover-dropdown

dmc.DatePickerInput( label=SET_START_DATE, value=date(2021, 1, 1), id="date-picker-dca", classNames={ "calendarHeader": "dmc-dropdown", "levelsGroup": "dmc-dropdown", "calendarHeaderLevel": "dmc-calendarHeaderLevel", "wrapper": "dmc-wrapper", "input": "dmc-input", "label": "dmc-label", "day": "dmc-input", "monthsListControl": "dmc-monthPickerControl", "monthsList": "dmc-monthPickerControl", "yearsList": "dmc-yearPickerControl", "yearsListRow": "dmc-yearPickerControl", }, popoverProps={"style": {"backgroundColor": "transparent"}}, required=True, clearable=False, valueFormat="DD-MM-YYYY", # maxDate=pd.to_datetime("today"), maxDate=datetime.now().date(), persistence=True, persistence_type="session", leftSection=DashIconify(icon="clarity:date-line", width=20), radius=20, my=10, ),

[AnnMarieW]

Can you make a complete minimal example that replicates the image? That looks strange and there might be some other CSS that's interfering.

[AnnMarieW]

Also, could you make the example in the docs work for you?

[rafalsza]

datepicker.zip
attached files

[AnnMarieW]

you can add this selector to your .css file

.mantine-Popover-dropdown {
  background-color: red
}

or in the component:

 popoverProps={"classNames": {"dropdown": "dmc-dropdown"} },

[rafalsza]

thank you