✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

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!