Search code examples
javascriptreactjsreact-reduxreact-datepicker

react-datepicker, issues disabling a specific Date

I am using react-datepicker for date and calendar implementation , It works fine I have integrated the component successfully, but facing one issue in making the default date disabled. I am using the below code.

<DatePicker customInput={<ExampleCustomInput />} className="w-dtsr-date-picker"
  selected={this.state.startDate}  //called when the date is clicked
  onChange={this.handleChange}    //called only when the value is chnaged
  monthsShown={2}     //number of months to be shown
  minDate={this.props.dateProps.minDate}  //min days to be shown in the calendar
  maxDate={this.props.dateProps.maxDate}  //max days to be shown in the calendar
  onChangeRaw={this.handleDateChangeRaw}  //preventing the user from manually entering the dates or text in the input text box
/>

by default say I want to disable 4/25/2019 , I am not able to do that, I see the component has a property called dayClassName , Have anyone used that , I am not sure how to pass the date and apply css to that specific date.

This is what i found in one of the examples - 

dayClassName={date => getDate(date) < Math.random() * 31 ? 'random' : undefined}

It did not work for me , not sure how to disable this specific date (4/25/2019), any help on this.?

Solution

  • You should be able to use the dayClassName prop to disable a specific date and pass a CSS class of your creation that disables user clicks. dayClassName returns a JS date so you'll have to compare it to the date you want to disable and then pass the disabled CSS classname if it's true

    Example:

    Prop:

    dayClassName={date => date.getTime() === new Date('04/25/2019').getTime() ? 'disabled-date' : undefined}

    CSS:

    .disabled-date {
  pointer-events: none;
}