Month Daypicker overview
TailNG Month Daypicker lets users pick a month-and-day combination — perfect for recurring dates like birthdays or anniversaries — without ever exposing a year in the emitted value. It wraps the shared datepicker surface with a custom adapter that formats and parses the MM-DD pattern and locks navigation to the months panel.
Simple sample
Compare the stock wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell.
Simple sample (Plain-CSS)
Simple sample (Tailwind CSS)
Import
Add TngMonthDaypickerComponent to your component's imports array. No primitives import is required for the wrapper path.
Wrapper import
import { TngMonthDaypickerComponent } from '@tailng-ui/components';
Quick start
Default wrapper usage
<tng-month-daypicker
[defaultValue]="{ month: 12, day: 25 }"
[year]="2024"
placeholder="MM-DD"
></tng-month-daypicker>
How it works
Internally, the component converts the { month, day } value into a full Date object using the configured year input so the underlying datepicker calendar renders correctly. The year also pins the min and max date to January 1 and December 31 of that year, ensuring the calendar only navigates within a single year. When the user selects a date, the component strips the year and emits only the month and day.
Behavior baseline
- Supports both uncontrolled (
defaultValue) and controlled (value) selection modes. - The input field displays and accepts the
MM-DDformat; the adapter handles parsing and formatting. - Calendar navigation is constrained to months and days within the provided
year. - Drilling into the year panel redirects back to the months panel automatically.
- Integrates with
tng-form-fieldvia theTNG_FORM_FIELD_CONTROLtoken. - Theme changes flow through semantic tokens so the field and portaled overlay stay in sync.