Building MonthPicker With React Hooks - Part 3

Reminder

Hi guys, thanks for following my blog. This post is third part of: "Building monthpicker using nothing but react hooks" series. It is better for you to have a look on previous two parts (if you didnt do it before)

Year navigation

Now for final functionalities - like navigating between years in dropdown header

   ... 
   const [year, setYear] = useState((new Date()).getFullYear());

   const incYear = e => {
      e.preventDefault();
      setYear(year + 1);
   }

   const decYear = e => {
      e.preventDefault();
      setYear(year - 1);
   }

   ...

Pressing the two ">" shaped buttons at dropdown header - will move you to prevous or next year.

One last thing - (without it the target cannot consider accomplished) is "monthClick" hadler. the month should change when some of "months" clicked. This could be easily achieved by attaching proper handler to each button:

   const monthClick = (e, idx) => {
      const currmonth = `0${idx+1}`.slice(-2);
      onChange(`${currmonth}.${year}`);
      toggleMenu();
   }

That it, you can view this codesandbox to see the whole code: