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?