TimePicker

Custom time selection control with scrollable hour and minute columns. The picker UI can display in 24-hour or 12-hour AM/PM mode. The ->format() option controls what value is written to the input (and submitted to the server). Default format is H:i (24-hour HH:MM).

Basic TimePicker

Start Time:

With Pre-populated Value & Now Button

Meeting Time:

30-Minute Step Intervals

Appointment Slot:

12-Hour AM/PM Mode — `->ampm()`

Use ->ampm() to switch the picker UI to 12-hour mode with an AM/PM column. The output format is independent — combine with ->format() to control what value gets submitted.

Event Time (AM/PM UI, 24-hr output):

Event Time (AM/PM UI + AM/PM output):

Custom Format Output — `->format()`

Format tokens (PHP date-style): H 24-hr with zero, G 24-hr without zero, h 12-hr with zero, g 12-hr without zero, i minutes, A AM/PM, a am/pm.

Format H:i (default — MySQL TIME):

Format g:i A (12-hr AM/PM string):

Format H:i:s (with seconds):

Disabled

Locked Time:

Select a time to see the value…

// Basic time picker (24-hr, default format H:i)
<?= $m->timepicker('startTime')
    ->name('start_time')
    ->placeholder('Select a time…') ?>

// Pre-populated with Now button (15-minute steps)
<?= $m->timepicker('meetingTime')
    ->name('meeting_time')
    ->value('09:30')
    ->step(15)
    ->showNowButton() ?>

// AM/PM UI — submit as 24-hour HH:MM (e.g. for MySQL TIME column)
<?= $m->timepicker('eventTime')
    ->name('event_time')
    ->value('14:00')
    ->ampm()
    ->format('H:i') ?>

// AM/PM UI — submit as 12-hour string (e.g. "2:30 PM")
<?= $m->timepicker('eventTime12h')
    ->name('event_time_12h')
    ->value('2:30 PM')
    ->ampm()
    ->format('g:i A') ?>

// Custom format with seconds
<?= $m->timepicker('preciseTime')
    ->name('precise_time')
    ->format('H:i:s') ?>

// Disabled
<?= $m->timepicker('locked')
    ->value('10:00')
    ->disabled() ?>

var tp = m.timepicker('startTime');

// Getter — returns the value in the configured format, or ''
// Default format H:i  →  '09:30'
// Format g:i A        →  '9:30 AM'
var time = tp.value();

// Setter — accepts any supported format (24-hr, 12-hr AM/PM)
tp.value('14:30');
tp.value('2:30 PM');

// Clear
tp.clear();

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

// Listen for changes
document.getElementById('startTime').addEventListener('m:timepicker:change', function(e) {
    // e.detail.value is in the configured output format
    console.log('New time:', e.detail.value);
});

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->timepicker($id)`	`string`	Create a TimePicker component.
`->value($value)`	`?string`	Set the initial value. Accepts 24-hour `'HH:MM'`, `'HH:MM:SS'`, or a 12-hour `'h:mm AM'` string. Pass `null` or empty string to clear.
`->name($name)`	`string`	Form field name attribute.
`->placeholder($text)`	`string`	Placeholder text shown when no time is selected. Default: `'Select time…'`.
`->step($minutes)`	`int`	Minute step interval — must be a divisor of 60 (e.g. 5, 10, 15, 30). Default: `15`.
`->showNowButton($show)`	`bool`	Show a "Now" footer button that snaps to the current time. Default: `false`.
`->ampm($use)`	`bool`	Switch the picker UI to 12-hour AM/PM mode. Shorthand for `->use24Hour(false)`. Default: `false` (24-hour UI).
`->use24Hour($use)`	`bool`	Display times in 24-hour format. Default: `true`. Pass `false` for 12-hour AM/PM mode.
`->format($fmt)`	`string`	Output format written to the input and submitted to the server. Tokens: `H` (24h+zero), `G` (24h), `h` (12h+zero), `g` (12h), `i` (minutes), `A` (AM/PM), `a` (am/pm). Default: `'H:i'`.
`->disabled($dis)`	`bool`	Disable the timepicker. Default: `false`.

JS JS Methods

Method / Property	Parameters	Description
`m.timepicker(id)`	`string`	Get (or create) TimePicker instance. Returns cached instance on subsequent calls.
`value()`		Get the current value in the configured output format (default `'HH:MM'`), or `''` if empty.
`value(val)`	`string`	Set the value. Accepts 24-hour `'HH:MM'` or 12-hour `'h:mm AM'` format. Writes to the input using the configured `data-format`.
`clear()`		Clear the selected time.
`enable()`		Enable the timepicker.
`disable()`		Disable the timepicker and close the panel.

EVENT Events

Event Name	Detail	Description
`m:timepicker:change`	`{ value: string }`	Fired on the hidden input element whenever the selected time changes (including when cleared). `detail.value` is the new value in the configured output format, or empty string.

TimePicker

Custom time selection control with scrollable hour and minute columns. Stores values in 24-hour HH:MM format and supports 12-hour AM/PM display mode.

Basic TimePicker

Start Time:

With Pre-populated Value & Now Button

Meeting Time:

30-Minute Step Intervals

Appointment Slot:

12-Hour AM/PM Mode

Event Time:

Disabled

Locked Time:

Select a time to see the value...

// Basic time picker
<?= $m->timepicker('startTime')
    ->name('start_time')
    ->placeholder('Select a time\u2026') ?>

// Pre-populated with Now button (15-minute steps)
<?= $m->timepicker('meetingTime')
    ->name('meeting_time')
    ->value('09:30')
    ->step(15)
    ->showNowButton() ?>

// 30-minute slots
<?= $m->timepicker('appointmentTime')
    ->name('appointment_time')
    ->step(30) ?>

// 12-hour AM/PM display
<?= $m->timepicker('eventTime')
    ->name('event_time')
    ->value('14:00')
    ->use24Hour(false) ?>

// Disabled
<?= $m->timepicker('locked')
    ->value('10:00')
    ->disabled() ?>

var tp = m.timepicker('startTime');

// Getter — returns 'HH:MM' or ''
var time = tp.value();

// Setter
tp.value('14:30');

// Clear
tp.clear();

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

// Listen for changes
document.getElementById('startTime').addEventListener('m:timepicker:change', function(e) {
    console.log('New time:', e.detail.value);
});

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->timepicker($id)`	`string`	Create a TimePicker component.
`->value($value)`	`?string`	Set the initial value in 24-hour HH:MM format (e.g. `'14:30'`). Pass `null` or empty string to clear.
`->name($name)`	`string`	Form field name attribute.
`->placeholder($text)`	`string`	Placeholder text shown when no time is selected. Default: `'Select time\u2026'`.
`->step($minutes)`	`int`	Minute step interval — must be a divisor of 60 (e.g. 5, 10, 15, 30). Default: `15`.
`->showNowButton($show)`	`bool`	Show a "Now" footer button that snaps to the current time. Default: `false`.
`->use24Hour($use)`	`bool`	Display times in 24-hour format. Default: `true`. Pass `false` for 12-hour AM/PM mode.
`->disabled($dis)`	`bool`	Disable the timepicker. Default: `false`.

JS JS Methods

Method / Property	Parameters	Description
`m.timepicker(id)`	`string`	Get (or create) TimePicker instance. Returns cached instance on subsequent calls.
`value()`		Get the current value as a `'HH:MM'` string, or `''` if empty.
`value(val)`	`string`	Set the value. Pass a 24-hour `'HH:MM'` string, or `''` to clear.
`clear()`		Clear the selected time.
`enable()`		Enable the timepicker.
`disable()`		Disable the timepicker and close the panel.

EVENT Events

Event Name	Detail	Description
`m:timepicker:change`	`{ value: string }`	Fired on the hidden input element whenever the selected time changes (including when cleared). `detail.value` is the new HH:MM string or empty string.

TimePicker

Basic TimePicker

With Pre-populated Value & Now Button

30-Minute Step Intervals

12-Hour AM/PM Mode — ->ampm()

Custom Format Output — ->format()

Disabled

PHP PHP Methods (Fluent)

JS JS Methods

EVENT Events

TimePicker

Basic TimePicker

With Pre-populated Value & Now Button

30-Minute Step Intervals

12-Hour AM/PM Mode

Disabled

PHP PHP Methods (Fluent)

JS JS Methods

EVENT Events

12-Hour AM/PM Mode — `->ampm()`

Custom Format Output — `->format()`