Dash core component single date picker style

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.


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

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

What about it doesn’t work?

I guess everything lol?


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

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