Lunar / Gregorian Date Picker

A Gregorian / lunar comparison calendar: each cell shows the Gregorian date large with the lunar date small (the first day of a lunar month shows the month name), with solar terms and traditional festivals marked by color dots and tags. The header switches between the Gregorian and lunar views, and the selected day is shown in full at the bottom (for example “BingwuYear (HorseYear)MayFifth Day of the Lunar New Year”). It ships with a full lookup table for 2026 (the Bingwu Year of the Horse) — zero dependencies, no lookup API needed.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<LunarDatePicker/>

    </div>
  );
}

Installation

Usage

import { LunarDatePicker } from "@/components/ui/lunar-date-picker";

const [date, setDate] = React.useState<Date | null>(new Date(2026, 5, 19));

<LunarDatePicker
  value={date}
  onChange={(d, lunar) => {
    setDate(d);
    console.log(lunar.ganzhi, lunar.month, lunar.day); // Bingwu May Fifth Day of the Lunar New Year
  }}
/>;

You can also call the lookup function getLunarInfo2026(date) directly to get the lunar information for any date in 2026 (out-of-range dates return null).

Data range: the built-in lookup table only covers the Gregorian dates 2026-01-01 through 2026-12-31 (a Taipei-timezone almanac, including the 24 solar terms and the major festivals). For other years, extend the month-segment data in the same format as the source, or switch to a full calendar library such as lunar-javascript.

Props

LunarInfo fields: ganzhi (sexagenary year), zodiac (zodiac animal), month (lunar month name), day (lunar day name), dayIndex (day number 1–30), solarTerm? (solar term), festival? (festival).

Accessibility

• Every date is a native button with a complete aria-label (Gregorian date plus lunar day plus festival and solar term), operable by keyboard with Tab / Enter
• The view toggle and the selected day use aria-pressed to convey state; the month navigation buttons carry "previous month / next month" labels and are disabled at the year boundaries
• When the user has "reduce motion" enabled at the system level, the month slide, the selection bounce, and the panel transitions are disabled and switching is instant
• The "today" marker is only computed after mount, so SSR and client rendering match and there is no hydration error