Date Picker
Calendar-based date and date-range picker component.
Single Date — Popover
Click the input to open the calendar. Today is highlighted; the selected day stays highlighted after the popover closes.
<div class="sc-dp" x-data="datePicker({ locale: 'en-US' })">
<input readonly :value="displayValue" @click="open = !open" />
<div class="sc-dp-popover" x-show="open">
<!-- nav + weekday header -->
<template x-for="cell in gridDays" :key="cell.date.toISOString()">
<button :disabled="cell.disabled" @click="select(cell.date)" x-text="cell.day"></button>
</template>
</div>
</div>Date Range
First click sets the start date, second click sets the end (or becomes the new start if it's earlier). A third click begins a fresh range.
Inline Calendar
Same component with no input trigger — useful embedded directly in a page, e.g. an availability or booking panel.
Disabled Dates
Weekends, a fixed block-out range, and a 45-day booking horizon are all disabled and cannot be selected or hovered.
Locale Support
Month and weekday names, plus which day the week starts on, come
from each locale's own data via Intl — compare the
French calendar (Monday-start) against the U.S. one above
(Sunday-start).
French (fr-FR)
Japanese (ja-JP)
Month/year names and week-start day come from Intl.DateTimeFormat
and Intl.Locale().weekInfo. weekInfo isn't supported in
every browser yet — the component falls back to a Sunday-start week where it's
unavailable, so the calendar still renders correctly, just without the
locale-specific week-start.