Datepicker font control

Dash Python
1

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

2 Likes
2

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: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-dates%4012.3.0.css

1 Like
3

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:

image

How can the input date font size be changed?

4

Hi chriddyp,

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

5

I recommend reading through the source to see the underlying markup of the component and the available properties: https://github.com/plotly/dash-core-components/blob/557d2fd4987c437265d220f71ee69c2d0616526c/src/components/DatePickerSingle.react.js#L106-L132

6

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!

7

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…

8

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

9

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})

3 Likes
10

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"})

11

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

12

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
13

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.

14

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?

image
image.png698×761 24.5 KB

15

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:

image

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

Anyone has a more elegant solution?

/mo

16

Hi chriddyp,

it seems that the size of DatePicker still unchangeable?

17

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;
}
2 Likes
18

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.

6 Likes
19

It’s work for me.

image

20

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',
id='end_date',
initial_visible_month=datetime.date.today())

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.