CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-datepicker
Hero
Hero

Reputation: 647

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

Upvotes: 1

Views: 17222

Answers (2)

Naresh Kumar
Naresh Kumar

Reputation: 1736

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)]}

Upvotes: 1

LMulvey
LMulvey

Reputation: 1670

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;
}

Upvotes: 3

Related Questions