> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/motss/app-datepicker/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A Material Design datepicker built with Lit for modern web applications

# 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](https://user-images.githubusercontent.com/10607759/158053308-b43cb0e1-f510-4f0e-9804-827a349d5fc7.png)

## 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.

<Note>
  Featured in [awesome-lit-html](https://github.com/web-padawan/awesome-lit-html#individual-components) - a curated list of awesome Lit resources.
</Note>

## Key features

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

<CardGroup cols={2}>
  <Card title="Material Design 2021" icon="palette">
    Built following Material Design 2021 specifications with customizable themes and CSS custom properties for complete design control.
  </Card>

  <Card title="Built with Lit" icon="bolt">
    Leverages Lit 3.1+ for fast, efficient rendering with minimal bundle size and maximum performance.
  </Card>

  <Card title="TypeScript support" icon="code">
    Written in TypeScript 5.3+ with full type definitions for enhanced developer experience and type safety.
  </Card>

  <Card title="Internationalization" icon="globe">
    Built-in i18n support using native Intl.DateTimeFormat API for locale-aware date formatting and week configurations.
  </Card>

  <Card title="Accessibility first" icon="universal-access">
    WCAG compliant with full keyboard navigation, screen reader support, and ARIA attributes.
  </Card>

  <Card title="Zero dependencies" icon="feather">
    Minimal external dependencies - only requires Lit and nodemod for calendar calculations.
  </Card>
</CardGroup>

## 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](https://user-images.githubusercontent.com/10607759/158064167-2b06d9ac-1e31-41b8-803e-2a8e3769b8e3.png)

### app-date-picker-dialog

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

![Date picker dialogs](https://user-images.githubusercontent.com/10607759/158062977-1c25555d-8596-408a-b612-d55e53c6990e.png)

## Modern technology stack

app-datepicker is built with modern web technologies that the JavaScript community has embraced since 2018:

* **[TypeScript](https://github.com/Microsoft/TypeScript)** - Type-safe development with enhanced tooling
* **[Lit](https://github.com/lit/lit)** - Fast, lightweight web components library
* **Web Components** - Standards-based, framework-agnostic components

<Tip>
  app-datepicker works with any framework or no framework at all. Use it with React, Vue, Angular, or vanilla JavaScript.
</Tip>

## Get started

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

<CardGroup cols={3}>
  <Card title="Installation" icon="download" href="/installation">
    Install app-datepicker via npm, yarn, or pnpm
  </Card>

  <Card title="Quick start" icon="rocket" href="/quickstart">
    Get a datepicker running in minutes
  </Card>

  <Card title="API reference" icon="book" href="/api/app-date-picker">
    Explore all properties, methods, and events
  </Card>
</CardGroup>

## Browser compatibility

app-datepicker works in the last 2 versions of all evergreen browsers:

* Chrome/Edge 100+
* Firefox 96+
* Safari 15.4+

<Note>
  Internet Explorer 11 is no longer supported. The component is built for modern browsers that support ES2021 features.
</Note>

## Community and support

app-datepicker is developed and maintained by [Rong Sen Ng (motss)](https://github.com/motss) with contributions from the Web Components community.

* **GitHub**: [motss/app-datepicker](https://github.com/motss/app-datepicker)
* **Discord**: [Join the community](https://discord.gg/ps8mCrvTKR)
* **Demo**: [Try it live](https://motss.xyz/demos/app-datepicker)
* **License**: MIT