Datepicker

A styled wrapper around the browser's native date and time input. Inherits full platform picker support (keyboard navigation, screen-reader announcements, locale formatting) without a custom implementation.

Datepicker vs Date Input — Use lt-datepicker when you need the browser's native date/time UI: it supports type="time" and type="datetime-local", integrates with native form validation, and works without any JavaScript. Choose lt-date-input instead when you need a consistent cross-browser look, locale-aware formatting, or the visual calendar grid.

Playground

Controls

Type

Value

Min

Max

Label

Helper Text

Variant

Size

Disabled

Required

Readonly

Name

Theme

HTMLReact

ShareCopy

Usage

<!-- Date picker -->
<lt-datepicker label="Start date" type="date"></lt-datepicker>

<!-- Time picker -->

<lt-datepicker label="Meeting time" type="time"></lt-datepicker>

<!-- Date and time -->

<lt-datepicker label="Appointment" type="datetime-local" required></lt-datepicker>

<!-- With min/max constraints -->

<lt-datepicker
label="Delivery date"
type="date"
min="2025-01-01"
max="2025-12-31"></lt-datepicker>

<!-- Error state -->

<lt-datepicker
label="Event date"
type="date"
variant="error"
helper-text="Please select a valid date"></lt-datepicker>

<script type="module">
document.querySelector('lt-datepicker').addEventListener('change', (e) => {
  console.log('selected:', e.detail.value);
});
</script>

import { Datepicker } from '@latty-ds/react';

<Datepicker label="Start date" type="date" onChange={(e) => console.log(e.detail.value)} />

<Datepicker
label="Appointment"
type="datetime-local"
required
onChange={(e) => setDateTime(e.detail.value)}
/>

<Datepicker
label="Event date"
variant="error"
helperText="Please select a valid date"
/>

<template>
<lt-datepicker
  label="Start date"
  type="date"
  @change="(e) => date = e.detail.value"
/>
</template>

API