react-tailwindcss-datepicker icon indicating copy to clipboard operation
react-tailwindcss-datepicker copied to clipboard

Added support for displaying (only) the year picker

Open ackelman opened this issue 2 years ago • 2 comments

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 avatar Mar 13 '23 14:03 ackelman

Hi @ackelman 👋

Sorry for the delay

Thanks for this PR.

onesine avatar Mar 14 '23 21:03 onesine

Hi @ackelman 👋

Sorry for the delay

Thanks for this PR.

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

parth1605 avatar Apr 15 '24 10:04 parth1605