startMode as 'year' opens with disabled years when maxDate is defined

[stevecastaneda]

Describe the bug When defining a maxDate and startMode='year', calendar should open with maxDate year as the last option, and all previous years available for immediate selection vs. having to click on the arrow to view the next series of years.

To Reproduce Steps to reproduce the behavior:

1. Create a DateInput.
2. Define startMode as 'year'.
3. Define maxDate as 'moment()'

Expected behavior Years available will only show a few options, 16/17/18 as of today, and grey out all the future options as expected due to maxDate, but instead should open with 18' as the last year with all previous years as options.

Screenshots https://www.dropbox.com/s/fc6ooev4o268sxn/Screenshot%202018-12-03%2014.49.04.png?dl=0

Dependencies versions Provide version numbers of following packages:

• semantic-ui-react - 0.83.0
• semantic-ui-css (or any alternative) N/A
• semantic-ui-calendar-react - 0.12.1

[arfedulov]

I've done the steps for reproducing the bug you've described. I have this code:

<DateInput
          startMode="year"
          popupPosition="bottom right"
          placeholder="Date startMode year"
          className="example-calendar-input"
          name="dateStartYear"
          value={this.state.dateStartYear}
          iconPosition="left"
          maxDate={moment()}
          autoComplete="off"
          preserveViewMode={false}
          onChange={this.handleChange} />

And I see this:

I probably missed something because for now it seems like the calendar works as expected.

[stevecastaneda]

Thanks for checking. The goal was to instead have 2018 show up as the last selectable item as there are no results eligible beyond it, instead of showing ineligible years.

On Dec 4, 2018, at 6:54 PM, Artem Fedulov [email protected] wrote:

I've done the steps for reproducing the bug you've described. I have this code:

<DateInput startMode="year" popupPosition="bottom right" placeholder="Date startMode year" className="example-calendar-input" name="dateStartYear" value={this.state.dateStartYear} iconPosition="left" maxDate={moment()} autoComplete="off" preserveViewMode={false} onChange={this.handleChange} /> And I see this:

I probably missed something because for now it seems like the calendar works as expected.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[arfedulov]

Oh, I get it. The calendar should display the following options if maxDate is 2018.

| 2007 | 2008 | 2009 | | 2010 | 2011 | 2012 | | 2013 | 2014 | 2015 | | 2016 | 2017 | 2018 |

I'll check other calendars to get to know how they deal with things like that. But I think it is Ok to just grey out the dates that are not selectable.

[stevecastaneda]

Exactly! It's more of a UX issue for sure, but I think it's helpful when maxDate is set. Appreciate you looking into it.

[dopeboy]

Are there any workarounds for this?