Add option to inherit font size

[localjo]

Right now, sizes are set in rem units, which means that the component has a different size than it's parent both for the font and the spacing of the calendar. In my case, this makes the calendar extremely small compared to everything else on my page. I can override that will some clever CSS, but it would be nice if there was a prop to make the component use em units instead to inherit the sizes from it's parent. Something like relativeSize={true}. If this is something others want, I can open a PR.

[DannyRyman]

I have the same problem when using alongside the stylesheet from the react-bootstrap.

[localjo]

I'd also be willing to open a PR that converts this component to use JS styles (quickly becoming the React norm) instead of a global stylesheet that has to be included separately. @Hacker0x01 do you have any thoughts on which direction you'd like to take this?

[matthizou]

Same issue as DannyRyman. The Bootstrap stylesheet has a side effect on the component, and the calendar appears tiny.

[acasaccia]

Thanks @josiahsprague for raising this! Would you share the CSS rules you used to override the default size while the PR is ready?

[jesseproudman]

Here's the CSS I used to make the table work:

.react-datepicker {
  font-size: 1.3rem !important;
}

.react-datepicker__current-month {
  font-size: 1.5rem !important;
}

.react-datepicker__header {
  padding-top: 6px !important;
}

.react-datepicker__navigation {
  top: 13px !important;
}

.react-datepicker__day-name, .react-datepicker__day {
  margin: 0.5rem !important;
}

[localjo]

This is what I'm using;

.react-datepicker {
  font-size: 1em;
}
.react-datepicker__header {
  padding-top: 0.8em;
}
.react-datepicker__month {
  margin: 0.4em 1em;
}
.react-datepicker__day-name, .react-datepicker__day {
  width: 1.9em;
  line-height: 1.9em;
  margin: 0.166em;
}
.react-datepicker__current-month {
  font-size: 1em;
}
.react-datepicker__navigation {
  top: 1em;
  line-height: 1.7em;
  border: 0.45em solid transparent;
}
.react-datepicker__navigation--previous {
  border-right-color: #ccc;
  left: 1em;
}
.react-datepicker__navigation--next {
  border-left-color: #ccc;
  right: 1em;
}

It works for me. Basically just replaces rem values with the same values in em, and adjusts some other things to make it all fit. But I'm not sure how thorough this is. Ideally I think this component should be converted to use JS inline styles, and accept a style prop that can override those, so that it doesn't require including an external stylesheet, and I also think it should use em by default instead of rem, so that the sizes can scale with the page that it's included in instead of needing tedious overrides. Waiting to hear from a maintainer of the package on what direction they'd like to go before I open a PR.

[abury]

Thanks @josiahsprague, works great.

[thangchung]

@josiahsprague thanks a lot 👍

[localjo]

Seems that this project isn't actively maintained anymore. @Hacker0x01 is it up for adoption?

[martijnrusschen]

@josiahsprague This project is still maintained. We welcome PRs to improve functionality or fix bugs.

[localjo]

@martijnrusschen I'm willing to open a PR. I was waiting for some feedback from the maintainers about which type of PR they would merge for this. I can do one of two things;

1. Update the global stylesheet to inherit font sizes, similar to the workaround CSS I posted above

2. Update the component to use JS Styles via react-themeable instead of a global stylesheet since that's quickly becoming the React norm. Other components, such as react-autosuggest do this.

I'd prefer approach 2, but I don't want to start that PR if the maintainers don't like the idea, because it'd be a lot of work to go to waste.

[loicbourg]

For the people struggling with this:
I had to set fixedHeight to true for the DatePicker to make the css of @josiahsprague work correctly.

[localjo]

Once I get a response from the package maintainers about which type of PR they would prefer I'll open one. Until then, I'm closing this issue.