Skip to content

A human-friendly datepicker – now as a Web Component! Supports natural language input through Chrono.js. Fully accessible with keyboard and screen reader. Contributions welcome!

License

Notifications You must be signed in to change notification settings

fymmot/inclusive-dates

Repository files navigation

Tommy's inclusive datepicker

A human-friendly and fully accessible datepicker with support for natural language input. Now as a standard Web Component written in Typescript!

Try typing "tomorrow" or "in 10 days"!

Calendar is forked from the excellent sqrrl/wc-datepicker

Github test action status Github docs action status NPM version

Features

πŸ§β€ Natural language input

Text field accepts natural language input using Chrono.js. Try typing "yesterday", "May tenth" or "in one year"!.

πŸ§β€ Accessibility first

Built to support users of assistive technology. Follows the WAI-ARIA APG Datepicker dialog pattern.

πŸ–Ό Framework-agnostic

Standard Web Component that works with any framework – or no framework at all.

🦢 Small footprint

The component is ~45KB minified and gzipped with Chrono.js. If you do not need language parsing, the original sqrrl/wc-datepicker calendar is ~4KB.

πŸͺ Low dependency

External dependencies limited to accessibility utils (@react-aria/live-announcer, @a11y/focus-trap and aria-hidden).

πŸ’ͺ Strongly typed

Written in TypeScript.

πŸ‡ͺπŸ‡Ί Localizable

Customizable labels and date formats.

🌈 Customizable

Semantic markup with no built-in styles.

πŸ§ͺ Well tested

Quality assured by means of unit tests.

Documentation & Demo

https://fymmot.github.io/inclusive-dates/

About

A human-friendly datepicker – now as a Web Component! Supports natural language input through Chrono.js. Fully accessible with keyboard and screen reader. Contributions welcome!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 6