Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Date Picker

Calendar-based date picker with keyboard navigation.

Components Date Picker
input interactive
<arc-date-picker>

Overview

DatePicker provides a calendar-based date selection interface that combines a read-only text input with a dropdown calendar grid. Clicking the input toggles a 6-row calendar showing the current month with previous/next month navigation arrows. The selected date is displayed in a human-readable format (e.g. "Jan 15, 2026") inside the input, while the underlying `value` property stores the date as an ISO string (YYYY-MM-DD). The calendar grid highlights today's date with an inset ring, the currently selected date with a filled accent-primary circle, and outside-month dates with reduced opacity. The `min` and `max` properties constrain the selectable range — dates outside this range appear dimmed and are non-interactive. Previous and next month buttons in the calendar header allow quick navigation without changing the selected value. When a date is selected, the component dispatches an `arc-change` event with the ISO date string in the detail. Clicking outside the component or pressing Escape closes the dropdown and returns focus to the input. The dropdown uses a slide-down entrance animation that respects `prefers-reduced-motion`. A configurable `label` renders above the input as an uppercase accent-font heading, consistent with other ARC UI form controls.

Guidelines

When to use

  • Set min and max to constrain the date range when the context requires it (e.g. future-only booking dates)
  • Provide a descriptive label like "Start Date" or "Date of Birth" for accessibility
  • Use the ISO string value for form submission and API communication, not the display format
  • Listen to arc-change to capture the selected date and validate it against business rules
  • Set the initial value property when editing an existing record so the calendar opens to the correct month

When not to use

  • Do not use DatePicker for date ranges — use two DatePicker instances with coordinated min/max instead
  • Do not allow the user to type directly into the input; it is read-only by design to ensure valid date formats
  • Do not set min greater than max, as this will disable all dates and make the picker unusable
  • Do not forget to handle the arc-change event — without it, the selected date is not captured
  • Do not place DatePicker inside a container with overflow: hidden, as the calendar dropdown will be clipped

Features

  • Calendar dropdown with 6-row grid showing current, previous, and next month days
  • ISO string value format (YYYY-MM-DD) for consistent data handling
  • Human-readable date display in the input (e.g. "Jan 15, 2026")
  • Min and max date constraints that disable out-of-range dates visually
  • Today highlight with an inset border ring for orientation
  • Previous/next month navigation arrows in the calendar header
  • Escape key and outside-click dismissal with focus restoration to the input
  • Animated dropdown entrance with `prefers-reduced-motion` support

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-date-picker label="Select Date" placeholder="Choose a date"></arc-date-picker>
 
import { DatePicker } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <DatePicker label="Select Date" placeholder="Choose a date" />
  );
}
 
<script setup>
import { DatePicker } from '@arclux/arc-ui-vue';
</script>

<template>
  <DatePicker label="Select Date" placeholder="Choose a date" />
</template>
 
<script>
  import { DatePicker } from '@arclux/arc-ui-svelte';
</script>

<DatePicker label="Select Date" placeholder="Choose a date" />
 
import { Component } from '@angular/core';
import { DatePicker } from '@arclux/arc-ui-angular';

@Component({
  imports: [DatePicker],
  template: `
    <arc-date-picker label="Select Date" placeholder="Choose a date"></arc-date-picker>
  `,
})
export class MyComponent {}
 
import { DatePicker } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <DatePicker label="Select Date" placeholder="Choose a date" />
  );
}
 
import { DatePicker } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <DatePicker label="Select Date" placeholder="Choose a date" />
  );
}

API

size 'sm' | 'md' | 'lg' 'md'
Control size. `md` is the default; `sm` and `lg` scale the field padding.
value string ''
The selected date as an ISO string (YYYY-MM-DD). Set this to pre-select a date. Updated when the user picks a date from the calendar.
name string ''
min string ''
Minimum selectable date as an ISO string. Dates before this are visually dimmed and non-interactive.
max string ''
Maximum selectable date as an ISO string. Dates after this are visually dimmed and non-interactive.
placeholder string 'Select date'
Placeholder text displayed in the input when no date is selected.
disabled boolean false
Disables the date picker, reducing opacity and preventing the calendar from opening.
label string ''
Label text rendered above the input in uppercase accent font styling.
open boolean false
Whether the calendar dropdown is visible. Reflected so it can be opened programmatically or styled from CSS.
locale string ''
BCP 47 tag used for month and weekday names. Defaults to the document's `lang`, then the browser's language.
first-day-of-week number 0
Which day the week starts on, 1 = Monday … 7 = Sunday. Defaults to the locale's own convention, so most of the world gets Monday and the US gets Sunday without configuring anything.
formAssociated boolean true
properties object { required: { type: Boolean, reflect: true }, readonly: { type: Boolean, reflect: true }, }
Lit merges static properties up the prototype chain, so every consumer gets these without declaring them. `required` participates in constraint validation below; `readonly` reflects for styling and is enforced by each component's interaction handlers (the mixin can't know which gestures mutate state).
autoValidates boolean true
Components that run their own constraint-validation logic (pattern checks, range checks) opt out of the automatic required sync by overriding this to false, and own the whole validity flag set instead.
form
validity
validationMessage
required boolean false
readonly boolean false

Events

arc-change detail: { value: string }
Fired when a date is selected

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy