Skip to content

A React library (including useDateInput/useDateRange hooks) to help compose a Date Picker/Calendar around your components

License

Notifications You must be signed in to change notification settings

mark-tate/use-date-input

Repository files navigation

use-date-input

This project is a React library to help compose your own date picker and calendar UI components.

From simple to advanced, you can build your own date picker component in minutes.

The key features of this projects

  • Lightweight - Optimized bundle size
  • Control - built with React hooks and the reducer pattern, the API gives you full control of the component's state
  • Themeable - built as a naked UI component, use the simple theming API to style
  • Date Frameworks - can be used with the date framework of your choice
    Either use the ready-made adapters (dayjs, date-fns, luxon, moment) or write your own adapter
  • Composable - can be used with any UI Framework
    Compose with your own UI components, to create date inputs, date dialogs or calendars with shortcut lists
  • Accessible - designed and tested for A11y, with full keyboard and screen-reader support
  • Localisation - customize region and labels
  • Documentation - fully documented with editable examples

To get up and running quickly, refer to the getting started guide.

For the full documentation, refer to the documentation.

Pay It Forward

This project was built to give something back to the OpenSource community.

Please raise a PR for this project or be inspired to create (or contribute) to another Open Source project.

Building this component took alot of effort, so to show your appreciation, please let me know how you are using it, where you
are using it and what themes you create.

All feedback appreciated, message me on Linked-In.

Credits

When I started out, I wanted to create the Downshift of DatePickers.
So a special mention to Kent, who inspired the journey.

Documentation site built with docz