CODEWITHSUNDEEP
cssreactjsdatepickerstyling
r1a2k3i4b
r1a2k3i4b

Reputation: 307

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!

Upvotes: 4

Views: 8777

Answers (2)

Code on the Rocks
Code on the Rocks

Reputation: 17824

The most direct way is to override the built-in react-datepicker css classes.

  1. In dev tools, locate the class you want to edit (eg. react-datepicker__day)
  2. In your global css file, add an entry for that class
  3. Update the style
.react-datepicker__day {
  background: #0000FF;
}

enter image description here

Some properties are harder to override. For these, you need to include the !important modifier after the value:

.react-datepicker__day {
  color: red !important;
}

If you don't want to directly override these built-in classes, you can also define custom class names and add them to your global css file like before:

<DatePicker
              inline
              selected={selectedLocalDateTime}
              onChange={onDateChange}
              dateFormat="MMMM d, yyyy"
              className='test-class'
              wrapperClassName='wrapper-class'
              calendarClassName='calendar-class'
            />

Upvotes: 1

lepsch
lepsch

Reputation: 10389

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.

Upvotes: 4

Related Questions