DatePicker

component

A field that opens a Calendar in a Popover: pick a date (or a range) with the mouse or the keyboard, or type it. The picked date goes into the calendar's hidden input, which forms and Live Components read.

Install

php bin/console ux:install date-picker \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: calendar popover
Composer: twig/extra-bundle
twig/html-extra:^3.24.0
twig/intl-extra:^3.24.0
symfony/ux-icons
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (4)

Default

Light

Dark

Code

<div class="flex min-h-96 items-start justify-center pt-6">
    <div class="w-60">
        <twig:Label for="date-picker-default-trigger" class="mb-2.5">Due date</twig:Label>
        <twig:DatePicker id="date-picker-default" selected="2026-03-12" open class="block">
            <twig:DatePicker:Trigger>
                <twig:Button variant="outline" class="w-full justify-between gap-2 font-normal" {{ ...date_picker_trigger_attrs }}>
                    <twig:DatePicker:Value placeholder="Pick a date" />
                    <twig:ux:icon name="flowbite:calendar-month-outline" class="size-4 text-body" aria-hidden="true" />
                </twig:Button>
            </twig:DatePicker:Trigger>
            <twig:DatePicker:Content>
                <twig:Calendar name="due" selected="2026-03-12" today="2026-03-15" />
            </twig:DatePicker:Content>
        </twig:DatePicker>
    </div>
</div>

Typing a date

Light

Dark

Code

<div class="flex min-h-96 items-start justify-center pt-6">
    <div class="w-64">
        <twig:Label for="date-picker-typed" class="mb-2.5">Start date</twig:Label>
        <twig:DatePicker id="date-picker-typed-picker" selected="2026-03-12">
            <div class="flex gap-2">
                <twig:DatePicker:Input>
                    <twig:Input id="date-picker-typed" {{ ...date_picker_input_attrs }} />
                </twig:DatePicker:Input>
                <twig:DatePicker:Trigger>
                    <twig:Button variant="outline" size="icon" aria-label="Choose date" {{ ...date_picker_trigger_attrs }}>
                        <twig:ux:icon name="flowbite:calendar-month-outline" class="size-5" aria-hidden="true" />
                    </twig:Button>
                </twig:DatePicker:Trigger>
            </div>
            <twig:DatePicker:Content>
                <twig:Calendar name="start" selected="2026-03-12" today="2026-03-15" minDate="2026-03-01" />
            </twig:DatePicker:Content>
        </twig:DatePicker>
    </div>
</div>

Range

Light

Dark

Code

<div class="flex min-h-96 items-start justify-center pt-6">
    <twig:DatePicker id="date-picker-range" :selected="['2026-03-09', '2026-03-13']" dateStyle="medium" open>
        <twig:DatePicker:Trigger>
            <twig:Button variant="outline" class="w-64 justify-start gap-2 font-normal" {{ ...date_picker_trigger_attrs }}>
                <twig:ux:icon name="flowbite:calendar-month-outline" class="size-4 text-body" aria-hidden="true" />
                <twig:DatePicker:Value placeholder="Pick dates" />
            </twig:Button>
        </twig:DatePicker:Trigger>
        <twig:DatePicker:Content label="Choose dates">
            <twig:Calendar mode="range" name="stay" :selected="['2026-03-09', '2026-03-13']" today="2026-03-15" />
        </twig:DatePicker:Content>
    </twig:DatePicker>
</div>

Date of birth

Light

Dark

Code

<div class="flex min-h-96 items-start justify-center pt-6">
    <twig:DatePicker id="date-picker-birth" dateStyle="long">
        <twig:DatePicker:Trigger>
            <twig:Button variant="outline" class="w-60 justify-between gap-2 font-normal" {{ ...date_picker_trigger_attrs }}>
                <twig:DatePicker:Value placeholder="Date of birth" />
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4 text-body" aria-hidden="true" />
            </twig:Button>
        </twig:DatePicker:Trigger>
        <twig:DatePicker:Content>
            <twig:Calendar name="birthday" captionLayout="dropdown" startMonth="1926-01-01" endMonth="2026-12-01" month="1990-06-01" today="2026-03-15" maxDate="2026-03-15" />
        </twig:DatePicker:Content>
    </twig:DatePicker>
</div>