New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Special modifiers: disabled and selected #34

Closed
gpbl opened this Issue Jul 29, 2015 · 11 comments

Comments

4 participants
@gpbl
Owner

gpbl commented Jul 29, 2015

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 #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

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jul 29, 2015

Owner

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

Owner

gpbl commented Jul 29, 2015

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

@basham

This comment has been minimized.

Show comment
Hide comment
@basham

basham Jul 29, 2015

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.

basham commented Jul 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jul 29, 2015

Owner

Agreed! 👍

Owner

gpbl commented Jul 29, 2015

Agreed! 👍

@gpbl gpbl added the new feature label Jul 30, 2015

@gpbl gpbl modified the milestone: v2.0.0 Aug 2, 2015

@gpbl gpbl removed this from the v2.0.0 milestone Nov 3, 2015

@emminnn

This comment has been minimized.

Show comment
Hide comment
@emminnn

emminnn Mar 1, 2016

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!

emminnn commented Mar 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Mar 1, 2016

Owner

@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) }
Owner

gpbl commented Mar 1, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@emminnn

emminnn Mar 1, 2016

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

emminnn commented Mar 1, 2016

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

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Mar 1, 2016

Owner

@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); 
   }
}
Owner

gpbl commented Mar 1, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@emminnn

emminnn Mar 1, 2016

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

emminnn commented Mar 1, 2016

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

@gpbl gpbl modified the milestone: v2 Mar 2, 2016

@gpbl gpbl closed this in f19c78f May 15, 2016

@dharanidhanapalan

This comment has been minimized.

Show comment
Hide comment
@dharanidhanapalan

dharanidhanapalan Aug 1, 2017

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?

dharanidhanapalan commented Aug 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
Owner

gpbl commented Aug 1, 2017

@dharanidhanapalan

This comment has been minimized.

Show comment
Hide comment
@dharanidhanapalan

dharanidhanapalan Aug 1, 2017

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

dharanidhanapalan commented Aug 1, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment