Style of DatePickerrange seems screwed up in the demo


I took the first example from dcc.DatePickerRange | Dash for Python Documentation | Plotly and ran a test server.

However my datepickerrange looks different than the one shown on the page. The dates on top of the calendar doesn’t align with the grid.


I have these dash package versions in my python environment:

dash (0.41.0)
dash-core-components (0.46.0)
dash-daq (0.1.4)
dash-html-components (0.15.0)
dash-renderer (0.22.0)
dash-table (3.6.0)

I have the same issue

Are you using custom CSS?

I’m using the css supplied by the example:

external_stylesheets = [‘’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

Sorry - I missed your post. No, I am not using any custom CSS for the datepicker. Still doesnt work with dash 0.42.0

The example shown in the user guide is not displaying correctly for me in Chrome as well

I also have the same exact issue with this component. No idea of a fix, I assumed it was my CSS.

						html.Div(children = 'Select Date Range:', style = {'font-weight': 'bold'}),
						dcc.DatePickerRange(id = 'datePicker', min_date_allowed=dt(2017,1,1), max_date_allowed=today,, minimum_nights=0, start_date = None, end_date = None, disabled = True),
					],style={'margin-bottom': '5px', 'width': '100%'}),

On the repository for dash-core-components there is an open issue for it #549. User @brolewis provided a fix in the issue comments:

It looks like the css has

th, td {
    padding: 12px 15px;

which is causing the cells to grow too large. I fixed this in my project with:

td.CalendarDay {
  padding: 0;

The same fix works for me at least! :slight_smile:


Solve my problem! Thanks a lot!

It solves my problem too. Thank you so much!