Skip to content
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

Added support for displaying (only) the year picker #89

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ackelman
Copy link

@ackelman ackelman commented Mar 13, 2023

Closes #55

The first commit adds a prop "showYearPicker" to the Datepicker which is just passed to the Calendar component, which just sets const [showYears, setShowYears] = useState(showYearPicker);. When a year is selected, the clickYear callback just sets the startDate and endDate to the first of January of the selected year.

The second commit adds a prop "yearPickerStartYearOffset" which offsets the years displayed in the year picker. For example if year is 2023 and yearPickerStartYearOffset = -10 the year picker now displays the years 2013-2024 instead of the default 2023-2034.

The third commit adds support for selecting a start- and end-year by moving the functionality which was in the "clickDay" callback to a separate helper function, and calls that helper function from the "clickYear" callback.

To use this, you just need to pass a couple of props to the Datepicker.
This selects a range of years (a start year and an end year):

<Datepicker
      displayFormat="YYYY"
      showYearPicker={true}
      yearPickerStartYearOffset={-5}
/>

This selects one single year:

<Datepicker
      displayFormat="YYYY"
      useRange={false}
      asSingle={true}
      showYearPicker={true}
      yearPickerStartYearOffset={-5}
/>

@ackelman ackelman changed the title Added initial support for displaying (only) the year picker, only works for single date datepicker so far Added support for displaying (only) the year picker Mar 13, 2023
@ackelman ackelman changed the title Added support for displaying (only) the year picker Added support for displaying (only) the year picker, closes #55 Mar 13, 2023
@ackelman ackelman changed the title Added support for displaying (only) the year picker, closes #55 Added support for displaying (only) the year picker Mar 13, 2023
@onesine
Copy link
Owner

onesine commented Mar 14, 2023

Hi @ackelman 👋

Sorry for the delay

Thanks for this PR.

@parth1605
Copy link

Hi @ackelman 👋

Sorry for the delay

Thanks for this PR.

Hi @onesine Can you please merge this and launch this feature?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Is there any way to use just the year picker part ?
3 participants