1

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.?

2 Answers 2

3

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;
}
2
  • can you post what datepicker component you have used here? Dec 10, 2019 at 16:34
  • My answer is based on the react-datepicker project using the included DatePicker component.
    – LMulvey
    Dec 10, 2019 at 17:41
1

You can try with the props

dayPickerProps={{
       disabledDays={[
            new Date(2017, 3, 12),
            new Date(2017, 3, 2)
          ]}
}}

or by directly using the prop as

disabledDays={[
        new Date(2017, 3, 12),
        new Date(2017, 3, 2)
    ]}

Edit: sorry mis-read DatePicker as DayPicker. the above applies for DayPicker component.

Edit 2 : As per documentation have you tried with prop

excludeDates={[new Date(), subDays(new Date(), 1)]}
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.