Date Picker — ARC UI

Components

Date Picker

input

interactive

<arc-date-picker>

Overview

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

Use DatePicker for date ranges -- use two DatePicker instances with coordinated min/max instead
Allow the user to type directly into the input; it is read-only by design to ensure valid date formats
Set min greater than max, as this will disable all dates and make the picker unusable
Forget to handle the arc-change event -- without it, the selected date is not captured
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';

<DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>

<script setup>
import { DatePicker } from '@arclux/arc-ui-vue';
</script>

<template>
  <DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>
</template>

<script>
  import { DatePicker } from '@arclux/arc-ui-svelte';
</script>

<DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>

import { Component } from '@angular/core';
import { DatePicker } from '@arclux/arc-ui-angular';

@Component({
  imports: [DatePicker],
  template: `
    <DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>
  `,
})
export class MyComponent {}

import { DatePicker } from '@arclux/arc-ui-solid';

<DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>

import { DatePicker } from '@arclux/arc-ui-preact';

<DatePicker label="Select Date" placeholder="Choose a date"></DatePicker>

API

Prop	Type	Default	Description
`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.
`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.

Events

Event	Description
`arc-change`	Fired when a date is selected

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight