GitHub
New

Date Picker (Lite)

PreviousNext

A date picker built on the browser's date input, without JavaScript.

Lite
import { DatePickerLite } from "@/components/ui/date-picker-lite"

export default function DatePickerLiteDemo() {
  return <DatePickerLite class="w-56" name="date" aria-label="Date" />
}

About

Date Picker (Lite) is a hand-written alternative to shadcn/ui's Date Picker, a Popover with a Calendar built on the React library react-day-picker. It is upstream's Input as a native date input with a calendar icon: the browser draws the calendar, handles the keyboard and submits an ISO date (2026-09-26).

Installation

pnpm dlx shadcnui-hono-jsx@latest add date-picker-lite

Usage

import { DatePickerLite } from "@/components/ui/date-picker-lite"
<DatePickerLite name="date" />

It takes every attribute of Input (name, value, min, max, required, disabled, aria-*), and type picks the kind of value: date (the default), datetime-local, month or week.

Date of Birth

Use min and max to limit the range.

import { DatePickerLite } from "@/components/ui/date-picker-lite"
import { Field, FieldLabel } from "@/components/ui/field"

export default function DatePickerLiteDob() {
  return (
    <Field class="w-56">
      <FieldLabel for="dob">Date of birth</FieldLabel>
      <DatePickerLite id="dob" name="dob" min="1900-01-01" max="2026-12-31" />
    </Field>
  )
}

Date and Time

import { DatePickerLite } from "@/components/ui/date-picker-lite"
import { Field, FieldLabel } from "@/components/ui/field"

export default function DatePickerLiteTime() {
  return (
    <Field class="w-64">
      <FieldLabel for="meeting">Meeting</FieldLabel>
      <DatePickerLite id="meeting" name="meeting" type="datetime-local" />
    </Field>
  )
}

Month

import { DatePickerLite } from "@/components/ui/date-picker-lite"
import { Field, FieldLabel } from "@/components/ui/field"

export default function DatePickerLiteMonth() {
  return (
    <Field class="w-56">
      <FieldLabel for="expiry">Card expiry</FieldLabel>
      <DatePickerLite id="expiry" name="expiry" type="month" />
    </Field>
  )
}

Form

The date your subscription starts.

import { Button } from "@/components/ui/button"
import { DatePickerLite } from "@/components/ui/date-picker-lite"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"

export default function DatePickerLiteForm() {
  return (
    <form class="w-full max-w-xs" method="post">
      <FieldGroup>
        <Field>
          <FieldLabel for="start">Start date</FieldLabel>
          <DatePickerLite id="start" name="start" required />
          <FieldDescription>
            The date your subscription starts.
          </FieldDescription>
        </Field>
        <Button type="submit" class="w-fit">
          Save
        </Button>
      </FieldGroup>
    </form>
  )
}

Notes

  • A lite alternative to a date picker built from calendar (not a port), with no JavaScript: upstream's Input as a native date input (type can also be datetime-local, month or week) with a calendar icon, submitting ISO values.
  • The browser draws the calendar popup, which cannot be styled (it follows color-scheme in dark mode) and differs between browsers; the field shows the browser's date format rather than a placeholder. Date ranges and several months are not supported.
  • Accepts class instead of className.
  • Upstream documentation: shadcn/ui Calendar. See also Differences from shadcn/ui.