A React library to help compose a Date Picker/Calendar around your components

by React

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.

A Date Picker can consist of an input and a Calendar or just a Calendar.

use-date-input uses an adapter API so that it can be used with any date framework.
use-date-input provides pre-made adapters for the most popular frameworks or you can write your own.

View Demo View Github

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

GitHub