admin 管理员组

文章数量: 1086019

I am using react-datepicker for date and calendar implementation , It works fine I have integrated the ponent 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 ponent 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.?

I am using react-datepicker for date and calendar implementation , It works fine I have integrated the ponent 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 ponent 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.?

  • javascript
  • reactjs
  • react-redux
  • react-datepicker
Share Improve this question edited Apr 3, 2019 at 17:17 etarhan 4,1762 gold badges17 silver badges29 bronze badges asked Apr 3, 2019 at 17:09 HeroHero 6474 gold badges14 silver badges36 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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 pare 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;
}

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

Edit 2 : As per documentation have you tried with prop

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

本文标签： javascriptreactdatepicker issues disabling a specific DateStack Overflow

版权声明：本文标题：javascript - react-datepicker, issues disabling a specific Date - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744059987a2526549.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。