date-picker

A real date, date and time, or time input, with a calendar for dates. Posts ISO values and works without JS.

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

PropRequiredDefaultOptions
namenull
labelnull
hintnull
errornull
idnull
valuenull
minnull
maxnull
optionalfalse
requiredfalse
mode"date"date, datetime, time
stepnull
timezonenull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { DatePicker } 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>