Special modifiers: disabled and selected

[gpbl]

It is very common for a date picker to work with selected and disabled days. While it is already possibile to implement disabled and selected modifiers, we could give them a special treatment to change the component's behavior. Example:

• if provided, they may add the aria-selected and aria-disabled attributes (see Add ARIA attributes for better accessibility #33)
• the disabled modifier may also prevent to attach click or touchtap events to those days
• we could implement them as prop (shortcut for the modifiers prop):

// will add the `selected` modifier for the selected day
<DayPicker selected={ day => isSameDay(this.state.selectedDay) } />

// will add the `disabled` modifier to sundays
<DayPicker disabled={ day => day.getDate() === 6 } />

[gpbl]

Not sure if call the props selectedDays vs selected or disabledDays vs disabled.

[basham]

While I like the simplicity of selected/disabled, I think that could imply that the entire component is somehow selected or disabled. It may be better to stick with selectedDay/disabledDay to be consistent with the existing API (renderDay). I think it should be singular (selectedDay/disabledDay) rather than plural (selectedDays/disabledDays) because the argument for the function is for a single day, not a collection.

[gpbl]

Agreed! 👍

[emminnn]

Hi!

Thanks for the great module. After trying several different ones, have decided to stick with this one due to simplicity to configure.

Though I got stuck somewhere, maybe the easiest part! 😆 . I need to disable all the future days besides today. How can I do that?

What I need is exactly opposite of disabled: DateUtils.isPastDay
I only need this because we use it to render statistics about past events (until yesterday).

Thanks!

[gpbl]

@emminnn please use the gitter room or open a new issue instead of asking things in an existing one :)

What I need is exactly opposite of disabled: DateUtils.isPastDay

Then just return the opposite:

disabled: function(day) { return !DateUtils.isPastDay(day) }

[emminnn]

Ah, yes indeed. Awesome thx! Gotta study ES6 a bit 😆

[gpbl]

@emminnn nothing to do with ES6. The modifiers are functions that receive day as first argument:

var modifiers = { 
   disabled: DateUtils.isPastDay
}

is same as

var modifiers = { 
   disabled: function(day) { 
        return DateUtils.isPastDay(day); 
   }
}

[emminnn]

Yes I figured that out, just that when I tried to write it in ES6 as you did it in examples, it didn't work, cause I did it wrong :/. Therefore I didn't even try the regular JS functions... 😖

Thanks a lot! I indeed have another question, but will bring that up in another issue...

[dharanidhanapalan]

Hi
I am using react-day-picker. It is really awesome. But I am still stuck in how to disable the click function for the disabled days . Can someone provide me a solution to proceed?

[gpbl]

@dharanidhanapalan see this example: http://react-day-picker.js.org/examples/disabling-interaction.html

[dharanidhanapalan]

@gpbl Thanks. I didn't notice that :( Got it 👍

[tamizharasank]

Hi Team,

I'm also using react-day-picker. It is really superb. But I am still stuck in how to disable the whole dayPicker module. Can someone provide me a solution to proceed?