Create React Calendar Date Range Picker

• react-datepicker

  34 7,827 9.7 JavaScript

  A simple and reusable datepicker component for React

  

I showed my team a "pretty good" version using react-hook-forms and react-datepicker, but when they asked me to move and resize and reshape and change colors, it was like I had to hack and custom build and add !important everywhere to override built in CSS, so much that is was decided it would be more efficient to build it from scratch.

• MyDatePickerDemo

  1 0 0.0 TypeScript

Thanks for reading and please let me know if you have any questions or comments. Again, the links to the completed code can be found here. Or if you want to implement my published version, which has more features than this demo, it can be found on npm or simply 'npm i date-range-calendar'.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-hook-form

  210 39,505 8.9 TypeScript

  📋 React Hooks for form state management and validation (Web + React Native)

  

I showed my team a "pretty good" version using react-hook-forms and react-datepicker, but when they asked me to move and resize and reshape and change colors, it was like I had to hack and custom build and add !important everywhere to override built in CSS, so much that is was decided it would be more efficient to build it from scratch.

• dayjs

  97 45,745 6.9 JavaScript

  ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

Next step is to start replacing some of our hard coded days and months with actual date values by using Javascript Date() object. We could use a library, Day.js would be my choice, but we can keep our dependencies to a minimum for now.

Suggest a related project