Bootstrap input for date

How to get a dbc style date selector?

I have this helper function so that I can add a heading to my inputs

def myinput(title, id, type=None, min=None, max=None, step=None, value=None, size=None,
            min_date_allowed=None, max_date_allowed=None, initial_visible_month=None, date=None):
    if type != 'date':
        return html.Div([
            dbc.Label(html.B(title), className='mb-0'),
            dbc.Input(type=type,min=min, max=max, step=step, id=id, value=value, className='mt-0', size=size)
            ], className="my-2")
    else:
        return html.Div([
            dbc.Label(html.B(title), className='mb-0'),
            dcc.DatePickerSingle(
                id=id,
                min_date_allowed=min_date_allowed,
                max_date_allowed=max_date_allowed,
                initial_visible_month=initial_visible_month,
                date=date,
                className="mt-0 form-control border-0"
            )
        ], className="my-2")

For none-date inputs it looks like nice…

image

For date-inputs where it reverts to the dcc.DatePickerSingle the box doesn’t line up nicely and it’s a different size

image

How do I get date inputs to be consistent with other bootstrap inputs?

HI @Deanm0000,

maybe there is some kind of padding applied, try adding p-0 to your className of the dcc.DatePickerSingle()