Change appearance of dcc.DatePickerSingle

Dash Python
1

I am trying to include a DatePickerSingle component in a dbc.Form. However, the look does not match the appearance of the other components:

dash

I would like the date picker field to have a similar look as the dropdown below (Select Time) with respect to size (font + box) and rounded cornders. I tried setting the style attribute of of the dcc.DatePickerSingle to style={"border-radius": "3px"}, but it had no effect. Any Ideas how I can achieve this?

below is my code for the form (which is marked in red in the screenshot above):

import dash_bootstrap_components as dbc
import dash_core_components as dcc
from datetime import date

# "Create New Event"-Form
date_and_time = dbc.FormGroup([
    dbc.Col([
        dbc.Label("Date", html_for="dropdown"),
        dcc.DatePickerSingle(
            id='my-date-picker-single',
            min_date_allowed=date(1995, 8, 5),
            max_date_allowed=date(2017, 9, 19),
            initial_visible_month=date(2017, 8, 5),
            date=date(2017, 8, 25),
            style={"border-radius": "3px"}
        ),
    ], width=6),
    dbc.Col([
        dbc.Label("Time", html_for="dropdown"),
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
        ),
    ], width=6),
])

slider = dbc.FormGroup(
    [
        dbc.Label("Slider", html_for="slider"),
        dcc.Slider(id="slider", min=0, max=10, step=0.5, value=3),
    ]
)

range_slider = dbc.FormGroup(
    [
        dbc.Label("RangeSlider", html_for="range-slider"),
        dcc.RangeSlider(id="range-slider", min=0, max=10, value=[3, 7]),
    ]
)

create_new_event_form = dbc.Form([date_and_time, slider, range_slider])
1 Like
2

@enq Did you come to a solution? I came across the same issue. I wonder if DatePicker is still covered by the Dash-Bootstrap-Component styling :confused:

It says so in this issue: #43.

I created a new issue for this in the Github repository: Missing styling for DatePickerSingle and DatePickerRange · Issue #590 · facultyai/dash-bootstrap-components · GitHub

3

You could try out dash-bootstrap-css which provides extended Bootstrap stylesheets that add consistent styling to various components in dash-core-components.

1 Like
4

Create a text file named something like myproj.css (any first name) and place it in the assets folder in your project root. It will be automatically loaded with your project. Then you can use DevTools (F12 in Chrome) to identify the appropriate DIVs and style them as you please.