Components

Calendar

A floating date picker and date range picker with optional presets sidebar and optional time inputs. All components live under the x-pajak-calendar namespace.

Date Picker

A floating date picker and date range picker with optional presets sidebar and optional time inputs (HH:MM). Supports single date, range, and time modes.

x-pajak-calendar::date-picker

Default

Due date

date-picker-default.blade.php

<x-pajak-calendar::date-picker
    name="due_date"
    label="Due date"
    placeholder="Pick a date"
/>

Pre-filled

Due date

date-picker-prefilled.blade.php

<x-pajak-calendar::date-picker
    name="due_date"
    label="Due date"
    value="2026-05-17"
/>

Min / max constraints

Due date

date-picker-constrained.blade.php

<x-pajak-calendar::date-picker
    name="due_date"
    label="Due date"
    min="2026-01-01"
    max="2026-12-31"
/>

With time

Appointment

date-picker-time.blade.php

<x-pajak-calendar::date-picker
    name="appointment"
    label="Appointment"
    :time="true"
    value="2026-05-17 09:30"
/>

Range

Date range

date-picker-range.blade.php

<x-pajak-calendar::date-picker
    name="period"
    label="Date range"
    :range="true"
    start="2026-05-01"
    end="2026-05-31"
/>

Range with time

Date range with time

date-picker-range-time.blade.php

<x-pajak-calendar::date-picker
    name="period"
    label="Date range with time"
    :range="true"
    :time="true"
    start="2026-05-01 00:00"
    end="2026-05-31 23:59"
/>

Range with presets

Date range

date-picker-presets.blade.php

<x-pajak-calendar::date-picker name="period" label="Date range" :range="true">
    <x-slot:presets>
        <button data-start="2026-05-11" data-end="2026-05-17">This week</button>
        <button data-start="2026-04-17" data-end="2026-05-17">Last 30 days</button>
        <button data-start="2026-05-01" data-end="2026-05-31">This month</button>
        <button data-start="2026-01-01" data-end="2026-12-31">This year</button>
        <button data-start="2025-01-01" data-end="2025-12-31">Last year</button>
    </x-slot:presets>
</x-pajak-calendar::date-picker>

Disabled

Due date

date-picker-disabled.blade.php

<x-pajak-calendar::date-picker
    name="due_date"
    label="Due date"
    :disabled="true"
    value="2026-05-17"
/>

Error state

Due date

Please select a valid date.

date-picker-error.blade.php

<x-pajak-calendar::date-picker
    name="due_date"
    label="Due date"
    error="Please select a valid date."
/>