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

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!
https://github.com/fymmot/inclusive-dates

accessibility datepicker stenciljs typescript vanilla-js wai-aria webcomponents

Last synced: 1 day ago
JSON representation

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!

• Host: GitHub
• URL: https://github.com/fymmot/inclusive-dates
• Owner: fymmot
• License: mit
• Created: 2019-04-29T10:04:01.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-08-05T16:33:32.000Z (4 months ago)
• Last Synced: 2024-12-05T19:08:46.165Z (8 days ago)
• Topics: accessibility, datepicker, stenciljs, typescript, vanilla-js, wai-aria, webcomponents
• Language: TypeScript
• Homepage: https://fymmot.github.io/inclusive-dates/
• Size: 2.46 MB
• Stars: 593
• Watchers: 10
• Forks: 23
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
Tommy's inclusive datepicker


  


    

      

      Your browser does not support the video tag.

    

  

  

  
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

  

  


    

    

    

    

  



## 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/**