Date Range Picker

A Date Range Picker lets the user choose a period of days on a calendar. It renders as a small button. Clicking the button opens a month grid where the user picks a start day and an end day, then confirms with Apply.

Usage

<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <DateRangePicker from="$fromDate" to="$toDate" (apply)="onRange" />
    <button type="button" class="btn btn-outline-secondary btn-sm" (click)="lastSevenDays">Last 7 days</button>
    <button type="button" class="btn btn-link btn-sm" (click)="clearRange">Clear</button>
</div>
<p if="$fromDate">From {$fromDate} to {$toDate}</p>
<p else class="text-muted">No range selected</p>

<?php

class DateRangePickerDocsExample extends BaseComponent
{
    public ?string $fromDate = null;
    public ?string $toDate = null;

    public function onRange(array $range)
    {
        $this->fromDate = $range[0];
        $this->toDate = $range[1];
    }

    public function lastSevenDays()
    {
        $now = time();
        $this->fromDate = gmdate('Y-m-d', $now - 6 * 86400);
        $this->toDate = gmdate('Y-m-d', $now);
    }

    public function clearRange()
    {
        $this->fromDate = null;
        $this->toDate = null;
    }
}

Binding the range

from and to are one-way. The picker reads them, but it does not write them back. When the user clicks Apply, the component emits (apply) with an array of two dates, [from, to]. Store them in your handler, as onRange does above.

Both dates are strings in the YYYY-MM-DD format. The range includes both days. If the user picks only a start day and clicks Apply, both dates are the same day.

The picker watches from and to. When you change them from the parent, for example from a preset button or a clear button, the calendar and the button label follow.

Picking days

• The first click sets the start day.
• The second click sets the end day. If the second day is before the start day, it becomes the new start day instead.
• A click after a complete range starts a new range.
• Apply stays disabled until a start day is picked.
• Cancel, or a click outside the calendar, closes it and restores the range from from and to.

The calendar opens on the month of the current end date, or the start date, or today when no range is set. Use the arrow buttons to move between months.

Things to know

• Weeks start on Monday.
• Today is shown in bold. Days after today are disabled, so you can not pick a future date.
• All date math uses UTC. If your server reads the dates as UTC too, the calendar and the server agree on the same days.
• The texts in the calendar (weekday names, month names, Apply, Cancel) are in English and can not be changed with properties.
• The button shows placeholder until both from and to are set. After that, it shows the range in a short form, month and day.

Properties

from - (optional), start of the range, YYYY-MM-DD. Default: null.

to - (optional), end of the range, YYYY-MM-DD. Default: null.

placeholder - (optional), label of the button when no range is set. Default: Custom range.

Events

(apply) - event that happens when the user clicks Apply. Receives an array [from, to] with two YYYY-MM-DD strings.