Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Datepicker font control

DatepickerSingle and DatepickerRange are rendered with font size larger than Dropdown and Input.
How to equalize these components font sizes?


You will need to modify the CSS of these components. You may be able to do this by setting the font-size of the parent component with something like html.Div(style={'fontSize': 10}, children=dcc.DatePickerSingle(...)). For reference, here are the default stylesheets of these components:

1 Like

Adding css to the parent component will just change the font of the calendar, but not the font of the “input” filter

For example, I changed the fontsize to 5px:


How can the input date font size be changed?

Hi chriddyp,

Datepicker does not have a className parameter, how can I set a CSS style to influence it?

I recommend reading through the source to see the underlying markup of the component and the available properties:

Hi chriddyp,

I have read the underlying markup and I haven’t found any option to modify aspects of the datepicker, such as font size, box width and height, etc. I don’t know If I’m missing something. It’s possible to change any of these properties?

Thanks in advance!

It seems the default datepicker cannot be modified… I guess the only way to go would be to create your own dash component from react and expose the attributes you want to modify? Ugh…

These properties are all modif-able by overriding the underlying component’s CSS, which you can inspect using the browser’s dev-tools.

Easier than you think:

  • Make subfolder named assets in the folder your app resides

  • Create a css file, for instance datepicker.css, with content:

    .DateInput { font-size: inherit; }

  • In your app, you may now modify the font size.
    For instance, if I put the DatePickerSingle inside a table cell:

    html.Td([ dcc.DatePickerSingle(...) ], style = {'fontSize': 8})


Hi jvt, this seems to fail on my side. I suspect, though, that I didn’t get local css right. Is there any statement I need to add in my app to use the css under /assets? Basically I add this line in .css:

.DateInput { height: inherit; }

And in my app have:
html.Td([ dcc.DatePickerSingle(...) ], style = {'height': "24px"})

Not sure about what you intend, but you may try line-height instead of height

I’ve just noticed that unfortunately this approach does not seem to work if the app is loaded inside django with DashApp from django_plotly_dash. The fontsize remains untouched, its size is fixed in an inline style sheet that can not be overriden

1 Like

Thanks. I’m not using Django and maybe this will work. I’ll get back to you once I have a change to touch the code. Thanks again for helping me out.

After upgrading to the latest and greatest dash, my DatePickerSingle are misbehaving a little and it looks like a font issue. I am unable to bring this under control using the font size CSS of the Div container.

The screen below explains it. Calendar 1 was produced without the external css, bWLwgP.css, (line 16) and calendar 2 (with misaligned days and over sized grid) was created by including line the external css.

What do I need to do to get the calendar 2 aligned and sized correctly without the need to exclude the external css file?

After carefully examining bWLwgP.css, it looks like the padding in th,td section of the Tables is causing the issue. I initially tried to set the padding to zero in the style of the parent Div “style={‘padding’: ‘0px 0px’}” , but that didnt work. I also tried setting padding-left, padding-right etc, but none worked.

As a workaround I copied the bWLwgP.css locally in the assets folder, edited the padding entry as shown in the image:


This fixes the problem with the calendar grid, but messes up the default padding for my tables.

Anyone has a more elegant solution?


Hi chriddyp,

it seems that the size of DatePicker still unchangeable?

I ran into this same issue… I wouldn’t consider it “elegant”, but this worked for me:

.DayPicker.DayPicker_1.DayPicker__horizontal.DayPicker__horizontal_2.DayPicker__withBorder.DayPicker__withBorder_3 {
    width: 360px !important;

.DayPicker_transitionContainer.DayPicker_transitionContainer_1.DayPicker_transitionContainer__horizontal.DayPicker_transitionContainer__horizontal_2 {
    width: 360px !important;
    height: 355px !important;
1 Like

Gonna necrothread this to deliver the solution:

In the assets folder of your dash app create a .css file. To change the fontsize of datepicker, use:

 /*actually either class is good, use both just to be sure*/
.DateInput_input, .DateInput_input_1 {
  font-size: inherit;  /*or whatever size you would like to have*/

To change the width of the box and make it size according to the container, instead, use this:

.DateInput, .DateInput_1 {
  width: 100%;

From what I could test, of the SingleDatePicker component, these 2 classes are those that control its aspect.

You’re welcome.


It’s work for me.


I tried to change the font color for the date picker Placeholder. This works in Firefox but does not work in Chrome:

schedule_end_date = dcc.DatePickerSingle(className='datepicker',

css file:

.DateInput_input {
  color: red;

Any ideas how to get it to work in Chrome ? I tried adding !important to color property, still would not work in Chrome.