Search code examples
cssreactjsdatepickerstyling

How to add custom style to React Datepicker (HackerOne)?

enter image description here

I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.

I've got this from https://reactdatepicker.com/#example-default and the github repo for it is https://github.com/Hacker0x01/react-datepicker

Any help would be much appreciated!

Solution

  • You can check in the examples the Custom calendar class name.

    Custom calendar class name

    It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:

    .rasta-stripes {
  .react-datepicker__week:nth-child(3n + 1) {
    background-color: #215005;
  }
  .react-datepicker__week:nth-child(3n + 2) {
    background-color: #eea429;
  }
  .react-datepicker__week:nth-child(3n + 3) {
    background-color: #a82a15;
  }
}

    So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.

    To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.