search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.58k stars 667 forks source link

add disableDay function #406

Closed greybutton closed 3 years ago

greybutton commented 4 years ago

Types of changes

What types of changes does your code introduce?

Put an x in the boxes that apply

Description

Predicate function that disable day fn(date: Date). For example, we need to enable us to select only Mondays. The function very helpful instead of disabledDates array.

Related Issue: #405

burakcan commented 3 years ago

@greybutton thank you for the pr, I can definitely see this being useful. The only thing I'm concerned about is to have 2 separate props to achieve similar results. Instead of adding another prop, maybe we can overload disabledDates and make it accept an array (thus keep the current behavior) or a function. Wdyt?

greybutton commented 3 years ago

@burakcan in my opinion that is not a good idea. I guess it delete flexibility, users can't use these props together. For example, disable weekends and some specific dates. So, I think better to stay as it is. disabledDates for some specific dates and disableDay for disabling day by some logic

burakcan commented 3 years ago

Yeah, that makes sense. Thank you @greybutton 👍

greybutton commented 3 years ago

@burakcan can you publish new npm version?

burakcan commented 3 years ago

@greybutton I will publish a new version before eow with some other bug fixes

Samsuhhh commented 1 year ago

HI, I know this package isn't being maintained, but I cannot get either of the disabledDates or the disabledDay props to work with the DateRange component and I feel like I'm really close so I don't want to semi-restart and use a whole new package. I am trying to clone AirBnB, so I want the days with existing bookings to be disabled.

What I have tried: 1) I have tried to use a function that returns an array of 'days' for the disableDay prop. 2) Pass in an array to the disabledDates prop which I got from my database. 3) I tried changing the range state to use range.selection.startDate and range.selection.endDate, but the underlying code tries to key into different types of data and I can't tell what it is expecting.

Help Needed: I really just need to know what exact shape the disabledDates prop is expecting. In the docs it just says "Date[]" and I've tried a bunch of different arrays of date objects or even date strings, but just can't get it to cooperate. Just found PR #2877 and followed the advised methods such as using toDate and parseISO from date-fns in converting date arguments when I get errors like the RangeError or TypeErrors, to no avail. Please advise.

greybutton commented 1 year ago

@Samsuhhh Hi, I think disabledDates prop expects an array of Date objects (javascript Date). And disableDay prop expects a boolean function that calculates whether to disable a date. disabledDay param is a javascript Date, I believe

aniketmohite commented 1 year ago

@greybutton @burakcan Hi, I want to use disabledDates along with range selection but it's not working properly for me. For example, I want to select the date range from 1 Jan 2023 to 31 Jan 2023 but my 15 Jan & 16 Jan are disabled. In this case, it won't let me select from 1st to 31st I can only select from 1st to 14th.
Is this doable? If yes, Can you please suggest to me how I can achieve this? Thanks!

josebedoya commented 1 year ago

@greybutton @burakcan Hi, I want to use disabledDates along with range selection but it's not working properly for me. For example, I want to select the date range from 1 Jan 2023 to 31 Jan 2023 but my 15 Jan & 16 Jan are disabled. In this case, it won't let me select from 1st to 31st I can only select from 1st to 14th. Is this doable? If yes, Can you please suggest to me how I can achieve this? Thanks!

I have the same issue