CODEWITHSUNDEEP
jqueryreactjsdatepicker
Lululu
Lululu

Reputation: 745

React DatePicker: Highlight current month's days

Is there any way to highlight current month's days in React date-picker.

Visually it should look like current month's days are like enabled black colored, and previous-next month's are grey (like disabled, but actually they're still clickable). 

 <DatePicker
   className="form-control"
   selected={this.props.dateFrom}
   onChange={(momentDate) => {
      this.props.changeDateFrom(momentDate);
   }}
   isClearable={false}
/>

Here is preview of example that I would like to create:

Example

enter image description here

Upvotes: 1

Views: 4825

Answers (2)

Kamal Soni
Kamal Soni

Reputation: 1552

As Damien suggested you need to over-ride the .react-datepicker__day--outside-month CSS class. The exact CSS would be as below for hiding any dates other than the current month.

.react-datepicker__day--outside-month {
  color: transparent !important;
  pointer-events: none;
}

Upvotes: 5

Damien
Damien

Reputation: 307

You can overwrite the CSS of this class:

  • .react-datepicker__day--outside-month

Upvotes: 7

Related Questions