LifeDS

Component

Calendar

Date field component built on react-day-picker. Supports single, multiple and range selection, dropdown captions, and multiple months.

modesingle · multiple · range
captionLayoutlabel · dropdown · dropdown-months · dropdown-years
numberOfMonthsnumber of visible months
buttonVariantnav button variant
disabledmatcher — disable specific dates
showWeekNumberboolean — show ISO week numbers
Playground
July 2026

Mode — single

one selectable date
July 2026

Mode — range

date range across 2 months
July 2026
August 2026

Mode — multiple

multiple independent dates
July 2026

Caption layout — dropdown

month/year dropdown navigation
July 2026

Disabled dates

past dates disabled
July 2026

Date picker — in popover

trigger button + calendar popup

With preset buttons

quick selection — Today · Tomorrow · In a week
July 2026

Week numbers

ISO week numbering
July 2026
27
28
29
30
31

Date & time picker

calendar + time field, layered in a popover

In card

calendar inside a card with footer action
Schedule a meeting
Pick a date for the appointment.
July 2026

Tokens used

12 semantic tokens consumed by this component.

--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--accentAccent
bg-accenttext-accentborder-accent
--accent-foregroundAccent Foreground
text-accent-foreground
--borderBorder
border-borderborder
--ringRing
ring-ringring