Skip to main content

​
Introduction to app-datepicker

app-datepicker is a modern, accessible datepicker component built with Lit and Material Design 2021. It provides a beautiful, standards-compliant date selection experience that works seamlessly across all modern browsers. Date pickers in different themes

​
What is app-datepicker?

app-datepicker is a collection of web components that bring Google’s Material Design datepicker experience to the web platform. Built entirely with modern web standards, it leverages the power of Lit (formerly LitElement) to deliver fast, lightweight, and maintainable date picking components.
Featured in awesome-lit-html - a curated list of awesome Lit resources.

​
Key features

app-datepicker combines the best of Material Design with web component standards to deliver a powerful date picking solution:

Material Design 2021

Built following Material Design 2021 specifications with customizable themes and CSS custom properties for complete design control.

Built with Lit

Leverages Lit 3.1+ for fast, efficient rendering with minimal bundle size and maximum performance.

TypeScript support

Written in TypeScript 5.3+ with full type definitions for enhanced developer experience and type safety.

Internationalization

Built-in i18n support using native Intl.DateTimeFormat API for locale-aware date formatting and week configurations.

Accessibility first

WCAG compliant with full keyboard navigation, screen reader support, and ARIA attributes.

Zero dependencies

Minimal external dependencies - only requires Lit and nodemod for calendar calculations.

​
Component variants

app-datepicker provides multiple component variants to fit different use cases:

​
app-date-picker

The core inline datepicker component for embedding directly in your UI. Perfect for forms, dashboards, and any interface where date selection is a primary interaction.

​
app-date-picker-input

A Material Design text field with an integrated datepicker dropdown. Combines the familiar text input pattern with calendar selection. Date picker inputs

​
app-date-picker-dialog

A modal dialog containing the datepicker, ideal for mobile experiences and focused date selection workflows. Date picker dialogs

​
Modern technology stack

app-datepicker is built with modern web technologies that the JavaScript community has embraced since 2018:
  • TypeScript - Type-safe development with enhanced tooling
  • Lit - Fast, lightweight web components library
  • Web Components - Standards-based, framework-agnostic components
app-datepicker works with any framework or no framework at all. Use it with React, Vue, Angular, or vanilla JavaScript.

​
Get started

Ready to add beautiful, accessible date picking to your application?

Installation

Install app-datepicker via npm, yarn, or pnpm

Quick start

Get a datepicker running in minutes

API reference

Explore all properties, methods, and events

​
Browser compatibility

app-datepicker works in the last 2 versions of all evergreen browsers:
  • Chrome/Edge 100+
  • Firefox 96+
  • Safari 15.4+
Internet Explorer 11 is no longer supported. The component is built for modern browsers that support ES2021 features.

​
Community and support

app-datepicker is developed and maintained by Rong Sen Ng (motss) with contributions from the Web Components community.