DateRangePicker

Dual-calendar date-range selector with range highlighting, optional preset shortcuts, single-day selection, and keyboard support. Two hidden inputs hold the start and end values for form submission.

Basic Range Picker

Click the trigger to open the two-month calendar. Click a start date, then an end date. The same day can be clicked twice for a single-day selection.

Pick a range to see output…

With Preset Shortcuts

Enables the preset panel with common shortcuts: Today, Last 7 days, This month, etc.

Pick a range to see output…

Auto-Apply

The selection closes immediately when the second date is clicked — no Apply button needed.

Pick a range to see output…

Pre-populated with Min/Max Constraints

Days outside the allowed range are greyed out and unselectable.

Single Month

Show a single calendar month instead of two side-by-side. Useful in narrow layouts.

Custom Presets

Supply your own preset labels and date pairs — useful for domain-specific ranges like financial quarters.

Week Starting Monday + With Label

Campaign Period

Disabled

// Basic — two hidden inputs, single trigger
<?= $m->daterangepicker('bookingDates')
    ->startName('start')
    ->endName('end')
    ->placeholder('Select date range…') ?>

// With default preset shortcuts
<?= $m->daterangepicker('reportDates')
    ->startName('from')
    ->endName('to')
    ->showPresets() ?>

// Auto-close after second date click
<?= $m->daterangepicker('eventDates')
    ->autoApply()
    ->showPresets() ?>

// Pre-populated + constrained to current year
<?= $m->daterangepicker('period')
    ->startValue(date('Y-m-01'))
    ->endValue(date('Y-m-d'))
    ->min(date('Y') . '-01-01')
    ->max(date('Y') . '-12-31') ?>

// Single-month calendar
<?= $m->daterangepicker('compactRange')
    ->singleMonth()
    ->autoApply() ?>

// Custom presets (e.g. financial quarters)
<?= $m->daterangepicker('quarter')
    ->presets([
        ['label' => 'Q1', 'start' => '2025-01-01', 'end' => '2025-03-31'],
        ['label' => 'Q2', 'start' => '2025-04-01', 'end' => '2025-06-30'],
    ]) ?>

// Week starts Monday
<?= $m->daterangepicker('campaign')
    ->weekStartsMonday()
    ->showPresets() ?>

// With label
<?= $m->daterangepicker('trip')
    ->label('Travel Dates')
    ->labelRequired()
    ->labelIcon('fa-plane') ?>

// Disabled
<?= $m->daterangepicker('locked')
    ->startValue('2025-03-01')
    ->endValue('2025-03-31')
    ->disabled() ?>

// Get/set range
var drp = m.daterangepicker('bookingDates');

// Getter — returns { start: '2025-01-01', end: '2025-01-31' }
var range = drp.value();
console.log(range.start, range.end);

// Setter
drp.value({ start: '2025-06-01', end: '2025-06-30' });

// Individual start/end getters + setters
var s = drp.start();          // get
drp.start('2025-07-01');    // set (keeps existing end)
var e = drp.end();
drp.end('2025-07-31');

// Clear selection
drp.clear();

// Constraints
drp.min('2025-01-01');
drp.max('2025-12-31');

// Open/close programmatically
drp.open();
drp.close();

// Enable / disable
drp.enable();
drp.disable();

// Listen for confirmed range
document.getElementById('bookingDates').addEventListener('m:daterangepicker:change', function(e) {
    console.log('Start:', e.detail.start, 'End:', e.detail.end);
});

// Listen for start-date selection
document.getElementById('bookingDates').addEventListener('m:daterangepicker:start', function(e) {
    console.log('Start selected:', e.detail.start);
});

// Listen for clear
document.getElementById('bookingDates').addEventListener('m:daterangepicker:clear', function() {
    console.log('Range cleared');
});

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->daterangepicker($id)`	`string`	Create a DateRangePicker component.
`->startValue($date)`	`?string`	Set the initial start date (Y-m-d by default).
`->endValue($date)`	`?string`	Set the initial end date.
`->values($start, $end)`	`?string, ?string`	Set both start and end values in one call.
`->startName($name)`	`string`	Form field name for the start hidden input.
`->endName($name)`	`string`	Form field name for the end hidden input.
`->placeholder($text)`	`string`	Combined placeholder shown when no range is selected.
`->startPlaceholder($text)`	`string`	Placeholder for the start segment. Default: `Start date`.
`->endPlaceholder($text)`	`string`	Placeholder for the end segment. Default: `End date`.
`->min($date)`	`string`	Earliest selectable date (Y-m-d).
`->max($date)`	`string`	Latest selectable date (Y-m-d).
`->format($fmt)`	`string`	PHP date() format for values. Default: `Y-m-d`.
`->disabled($dis)`	`bool`	Disable the picker. Default: `false`.
`->highlightToday($hl)`	`bool`	Highlight today in the calendar. Default: `true`.
`->showPresets($show)`	`bool`	Show the built-in preset shortcuts sidebar. Default: `false`.
`->presets($arr)`	`array`	Custom preset array (each entry: `[label, start, end]`). Automatically enables the preset panel.
`->weekStartsMonday($mon)`	`bool`	Start week columns on Monday. Default: `false` (Sunday).
`->singleMonth($single)`	`bool`	Show one calendar instead of two side-by-side. Default: `false`.
`->autoApply($auto)`	`bool`	Close and apply immediately when the end date is clicked, skipping the Apply button. Default: `false`.
`->required($req)`	`bool`	Mark the start input as required. Default: `false`.
`->label($text)`	`string`	Render a label above the trigger. Inherited from Component.
`->labelRequired()`		Mark the label with a required asterisk.
`->labelHint($text)`	`string`	Add hint text to the label.
`->labelIcon($fa)`	`string`	Prepend a Font Awesome icon to the label.

JS JS Methods

Method / Property	Parameters	Description
`m.daterangepicker(id)`	`string`	Get DateRangePicker instance (auto-initialized on DOMContentLoaded).
`value()`		Get range as `{ start, end }` strings.
`value({ start, end })`	`object`	Set both dates programmatically.
`start()`		Get start date string.
`start(val)`	`string`	Set start date (keeps existing end).
`end()`		Get end date string.
`end(val)`	`string`	Set end date (keeps existing start).
`clear()`		Clear both dates and emit `m:daterangepicker:clear`.
`min(val)`	`string`	Update minimum date constraint.
`max(val)`	`string`	Update maximum date constraint.
`open()`		Open the picker panel programmatically.
`close()`		Close the picker panel.
`enable()`		Enable the picker.
`disable()`		Disable the picker.

EVENT Events

Event Name	Detail	Description
`m:daterangepicker:change`	`{ start: string, end: string }`	Fired when the Apply button is clicked (or auto-apply fires) with a complete range.
`m:daterangepicker:start`	`{ start: string }`	Fired immediately when the start date is clicked (end not yet selected).
`m:daterangepicker:clear`	`{}`	Fired when the Clear button is clicked.