Dash core component single date picker style

Dash Python
1

I wanted to share some code in the case anyone was looking for it. The dcc.datepickersingle style didn’t match other components like dcc.Dropdown so i spent some time analyzing it and came up with this:

.DateInput, .DateInput_1 {
    border-radius: 4px 0 0 4px !important;
}

.DateInput_input, .DateInput_input_1 {
    Height: 34px !important;
    Width: 100% !important;
    border-radius: inherit;
}

.SingleDatePickerInput__withBorder {
    border-radius: 4px 0 0 4px;
    border: 1px solid #ccc !important;
}

I’m not an expert in CSS but if you put this into your assets/style.css file, datepickersingle should now look like the other dcc components do. I’m sure there may be a way to use the bootstrap styles but I couldn’t find a better way. If someone knows, feel free to add.

2 Likes
2

Thanks this is exactly what I’ve been looking for!

3

Doesn’t work anymore, at least for me. Anyone with an alternative?

4

What about it doesn’t work?

5

I guess everything lol?

image

I am not using any “dash demo” css or so except for some of my own, since it did seem to interfere with DMC.

6

Apologies if i’m not following but that datepicker looks fine?

7

Dear Dash Community,

Greetings, Everyone. Any way I can please have some help with styling the dcc.Datepicker? The code is

dcc.DatePickerRange(

id=‘etf-date-picker’,

start_date=(datetime.datetime.now() - datetime.timedelta(days=1500)).strftime(‘%Y-%m-%d’),

end_date=datetime.datetime.now().strftime(‘%Y-%m-%d’),

display_format=‘YYYY-MM-DD’,

min_date_allowed=datetime.datetime(2000, 1, 1),

max_date_allowed=datetime.datetime.now(),

className=‘dash-datepicker’,

style={‘color’: ‘dark’}

)

The issue is how to get the white parts in this container dark mode? Change the coloring (#212529 or what ever color). What do we target for the css styling?

image
image666×856 29.8 KB

Any suggestions please?