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.