TimePicker Widget TimePicker.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The TimePicker widget allows you to easily select a time for a text input using your mouse or keyboards arrow keys. The widget is a wrapper enhancement of the TimePicker plugin by rendom forked from jdewit's TimePicker. This widget as used here has been specially enhanced for Yii framework 2.0 and Bootstrap 3.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the TimePicker widget configuration are:
  • size: string the size of the input, must be one of: lg, md, sm, xs

  • addon: string the the addon that will be appended to the time picker input. Defaults to

  • addonOptions: array the HTML attributes for the addon container. The following additional options are recognized:

    • asButton: boolean if the addon is to be displayed as a button.

    • buttonOptions: array HTML attributes if the addon is to be displayed like a button. If asButton is true, this will default to ['class' => 'btn btn-default']

  • containerOptions: array the HTML attributes for the main widget container.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the TimePicker plugin options. The following options are supported:

    • template: string/boolean must be one of 'dropdown' or 'modal'. If set to false, the picker widget will not be displayed. Defaults to 'dropdown'.

    • minuteStep: integer specify a step for the minute field. Defaults to 15.

    • secondStep: integer specify a step for the second field. Defaults to 15.

    • defaultTime: string/boolean if set to 'current' will display the current time. If set to a time formatted string (like 11:45 AM), it will display the specific set time. If set to false will not be displayed. Defaults to 'current'.

    • showSeconds: boolean show the seconds field. Defaults to false.

    • showMeridian: boolean if set to true will display time in 12 hour format. If set to false, the time will be displayed in a 24 hour format. Defaults to true.

    • showInputs: boolean show the text inputs in the picker widget. If set to false, will not display rhw inputs. Defaults to true.

    • disableFocus: boolean disables the input from changing on mousewheel events. Defaults to false.

    • disableMousewheel: boolean disables the input from changing on mousewheel events. Defaults to false.

    • modalBackdrop: boolean show modal backdrop. Defaults to false.

  • pluginEvents: array the TimePicker JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. For example:

    pluginEvents = [
        "show" => "function(e) {  # `e` here contains the extra attributes }",
        "hide" => "function(e) {  # `e` here contains the extra attributes }",
        "update" => "function(e) {  # `e` here contains the extra attributes }",
    ];
    

Usage with ActiveForm and model. Supports model validation rules for the ActiveField.

With a model and without ActiveForm

Usage without a model

A readonly time picker input

A disabled time picker input

use kartik\widgets\ActiveForm;
use kartik\widgets\TimePicker;

// Usage with ActiveForm and model
$form = ActiveForm::begin();
echo $form->field($model, 'event_time')->widget(TimePicker::classname(), []);

// With a model and without ActiveForm
echo '<label class="control-label">End Time</label>';
echo TimePicker::widget(['model' => $model, 'attribute' => 'end_time']);

// Usage without a model
echo '<label class="control-label">Begin Time</label>';
echo TimePicker::widget(['name' => 'begin_time']);

// A readonly timepicker input
echo '<label class="control-label">Birth Time</label>';
echo TimePicker::widget([
    'name' => 'birth_time',
    'options' => [
        'readonly' => true,
    ],
]);

// A disabled timepicker input
echo '<label class="control-label">View Time</label>';
echo TimePicker::widget([
    'name' => 'view_time',
    'options' => [
        'disabled' => true,
    ],
]);

ActiveForm::end();

Manipulate display of seconds, meridian (12h/24h), and the time increment steps

Control the styling of the picker addon

Control the size of the widget and container style

Use a input template without a picker. Just use the keyboard arrow keys to edit time. Can also be enhanced along with the size parameter.

TimePicker within a bootstrap modal window with initial values.

use kartik\widgets\TimePicker

// Manipulate display of seconds, meridian (12h/24h), and the time increment steps
echo TimePicker::widget([
    'name' => 't1',
    'pluginOptions' => [
        'showSeconds' => true,
        'showMeridian' => false,
        'minuteStep' => 1,
        'secondStep' => 5,
    ]
]);

// Control the styling of the picker addon
echo '<label class="control-label">Set Time</label>';
echo TimePicker::widget([
    'name' => 't2',
    'addonOptions' => [
        'asButton' => true,
        'buttonOptions' => ['class' => 'btn btn-info']
    ]
]);

// Control the size of the widget and container style
echo '<label class="control-label">Set Time</label>';
echo TimePicker::widget([
    'name' => 't3',
    'size' => 'lg',
    'containerOptions' => ['class' => 'has-warning']
]);

// Use a input template without a picker. Just use the keyboard arrow keys to edit time. 
// Can also be enhanced along with the <code>size</code> parameter.
echo TimePicker::widget([
    'name' => 't4',
    'pluginOptions' => [
        'template' => false
    ]
]);

// TimePicker within a bootstrap modal window with initial values.
Modal::begin([
	'header' => '<h2>TimePicker with other fields</h2>',
	'toggleButton' => ['label' => 'Launch Modal', 'class' => 'btn btn-primary'],
]);
	echo TimePicker::widget(['name' => 't5']);
	echo TimePicker::widget(['name' => 't6', 'value'=> '11:55 PM']);
	echo Html::textArea('remarks', '', ['class'=>'form-control']);
Modal::end();