TimePicker supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the TimePicker::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set TimePicker::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set TimePicker::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set TimePicker::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-timepicker extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-timepicker "dev-master"

"kartik-v/yii2-widget-timepicker": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• 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 btn-outline-secondary']

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

• disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

• readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

• 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 }",
  ];
  

use kartikorm\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',
    'disabled' => true
]);

ActiveForm::end();

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']
]);
echo '<hr>';
echo TimePicker::widget([
    'name' => 't3a',
    'size' => 'sm',
    'containerOptions' => ['class' => 'has-success']
]);

// 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
    ]
]);
echo '<hr>';        
echo TimePicker::widget([
    'name' => 't4a',
    'size' => 'lg',
    'pluginOptions' => [
        'template' => false
    ]
]);
echo '<hr>';        
echo TimePicker::widget([
    'name' => 't4b',
    'size' => 'sm',
    'pluginOptions' => [
        'template' => false
    ]
]);

// TimePicker within a bootstrap modal window with initial values.
Modal::begin([
    'title' => 'TimePicker with other fields',
    '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();