Editing DateInput and SingleDatePicker style in css

Dash Python
1

Hello all.

I’ve been playing around with the DatePickerSingle dash core components element and I noticed it’s missing a className attribute or a style attribute, which I would use to add custom css styles. The default css style is defined by the file react-dates@12.3.0.css, found in the package directory. I tried manually editing that file to, for example, remove the border around the SingleDatePickerInput (by setting border: 0px; )but found no success.

A couple of questions surfaced: which is the correct (or just easier) way to edit the styles of DatePickerSingle elements? Are there any plans in the future to include className and/or style arguments to these elements?

Thanks

1 Like
2

Hi @fariasdoto,

Thanks for your question.

To remove the border of the input on a DatePickerSingle component you must use the following css file and add custom css to your app:

.SingleDatePickerInput {
  border: 0px;
}

and also add this to your dash app:

external_css = ["https://codepen.io/alishobeiri/pen/yoRPKm.css?v=10000"]

for css in external_css:
    app.css.append_css({"external_url": css})

The external_css variable you see there is just my codepen file containing the css line I described above. Hopefully that will do the trick.

In regards to the rest of your question the css files for the components are not served locally so changing the file will have no effect as it’s actually being loaded from: https://unpkg.com/dash-core-components@0.12.3/dash_core_components/react-dates@12.3.0.css
as per __init__.py.

If you want to serve the files locally you must add the following line to your application replacing app with whatever your Dash app is named:
app.css.config.serve_locally = True

For now, I think the best way to style these components is to use their predefined classNames to override preexisting css attributes similar to what we do in the CodePen file. The best way to identify the classNames is to use the inspector tool Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) on Chrome or use the equivalent on other browsers.

I thinking adding the className attribute to the DatePicker component could definitely be a possibility but I’m going to look more into it to figure out if it’s actually possible.

2 Likes
3

Hey @alishobeiri, thanks for answering.

After reading your answer I used the browser inspect function and, as you said, I could see the .css loading externally, thus any change I made locally would be pointless.

I’ll be taking your codepen example and using it in my externally hosted .css file, thanks a lot!

2 Likes