date-range-picker
Two real date inputs sharing one calendar.
Example
UTC
Laravel
<x-admin::form-grid>
<x-admin::date-picker name="g_starts" label="Starts on" value="2026-11-15" />
<x-admin::date-range-picker from="g_from" to="g_to" label="Season" from-value="2026-03-01" to-value="2026-11-30" />
<x-admin::date-picker name="g_opens" mode="datetime" label="Opens at" value="2026-11-15T09:30" :step="15" timezone="UTC" />
<x-admin::date-picker name="g_daily" mode="time" label="Daily send time" value="08:00" :step="30" />
</x-admin::form-grid>Props
| Prop | Required | Default | Options |
|---|---|---|---|
from | yes | ||
to | yes | ||
label | null | ||
hint | null | ||
error | null | ||
id | null | ||
from-value | null | ||
to-value | null | ||
min | null | ||
max | null | ||
optional | false | ||
required | false |
Other stacks
React and Vue: import { DateRangePicker } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.
HTML, for any stack
<div class="adm-form-grid"><div class="adm-field">
<label class="adm-label" for="g_starts">Starts on</label>
<div class="adm-date" data-adm-date >
<div class="adm-input-group">
<input
type="date"
name="g_starts" id="g_starts" value="2026-11-15" class="adm-input"
>
<button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm adm-input-group__action" data-adm-date-open aria-label="Choose date"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg></button>
</div>
</div>
</div>
<div class="adm-field">
<label class="adm-label" for="g_from">Season</label>
<div class="adm-date" data-adm-date>
<div class="adm-input-group">
<input type="date" class="adm-input" name="g_from" id="g_from" aria-label="Start date" value="2026-03-01" >
<span class="adm-date__sep" aria-hidden="true">–</span>
<input type="date" class="adm-input" name="g_to" aria-label="End date" value="2026-11-30" >
<button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm adm-input-group__action" data-adm-date-open aria-label="Choose dates"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg></button>
</div>
</div>
</div>
<div class="adm-field">
<label class="adm-label" for="g_opens">Opens at</label>
<div class="adm-date" data-adm-date >
<div class="adm-input-group">
<input
type="datetime-local"
name="g_opens" id="g_opens" value="2026-11-15T09:30" step="900" aria-describedby="g_opens-timezone" class="adm-input"
>
<span class="adm-input-group__addon" id="g_opens-timezone" >UTC</span> <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm adm-input-group__action" data-adm-date-open aria-label="Choose date"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg></button>
</div>
</div>
</div>
<div class="adm-field">
<label class="adm-label" for="g_daily">Daily send time</label>
<div class="adm-date" >
<div class="adm-input-group">
<input
type="time"
name="g_daily" id="g_daily" value="08:00" step="1800" class="adm-input"
>
</div>
</div>
</div></div>