Date Picker
1 min readMar 14, 2023
Tools: React+ CSS, HTML
Functionality
- drop-down calendar pane, toggled by the calendar icon;
- select year (backwards or forwards), select months from React-Select element, select date;
- confirm by “OK” (selected date object is stored for further use) or start again by pressing “Cancel” (calendar re-initializes with today).
Comments
The mathematical logic was not complicated, but needed some careful consideration (leap years, different weekdays for the 1st of each month etc). Looking back now, after a couple of days, I see that I probably should have used moment.js library for added clarity and flexibility — instead of handling it all through plain JS Date objects.
From the front-end perspective, it was the first time I implemented a React Select component. The customization still needs some work, did not fully get to the bottom of all the targeting options available in Select.
