Time Picker

Smart input for time

Description

This is the special input type for selecting time. It's the wrapper around nice library called bootstrap-timepicker. If you want to examine all capabilities of this library, you are encouraged to follow that link and read through the author's documentation.

This widget inherits from the CInputWidget so you have to provide either model and attribute pair of values or a name for widget to properly generate the name HTML attribute for input element.

note You have to click on the "clock" icon appended to the right of input to bring up the timepicker UI. This is different from the default behavior of similar input widgets. You can prevent this by setting the noAppend attribute.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbTimePicker',
    array(
        'name' => 'some_time',
    	'wrapperHtmlOptions' => array('class' => 'col-md-3'),
    )
);

Widget Configuration

Here's all configuration properties which you can set for TbTimePicker widget.

Property Description
CModel model = null The data model associated with this widget. See CInputWidget.model. Either this property along with attribute should be defined, or the name.
string attribute = null If you set the model attribute, here you have to specify the name of the model property which you want to change with this widget. See CInputWidget.attribute Either this property along with model should be defined, or the name.
string name = null The value of name HTML attribute of the input element. It must be set if you did not provide value for model. See CInputWidget.name Either this property should be defined, or the model together with attribute.
string value = null Here you can force the initial value of the input. If model is provided, by default model's value is used. See CInputWidget.value
array options = array() Options for the original library. This value will be JSON-encoded and fed to bootstrap-timepicker. See the library documentation for list of all possible options.
array htmlOptions = array() HTML attributes of the input tag itself. Please note that it is not the attributes of a wrapper tag around the input. See CInputWidget.htmlOptions
array wrapperHtmlOptions = array() HTML attributes of the wrapper tag around the input. This tag will be automatically rendered by widget, and is needed for TimePicker to work. Please note that this wrapper tag corresponds to CSS selector div.bootstrap-timepicker.input-append.
boolean noAppend = false By default TimePicker field is being rendered with nice clock icon appended to the right of input. You can set this attribute to true and disable rendering of this appendix, for example, if you want to render your own When set to true, wrapper tag loses the input-append class.
TbActiveForm form = null You can pass the TbActiveForm instance here to help the widget automatically generate proper name attribute. Actually, when you make TimePicker using the TbActiveForm.timepickerRow() call, the form instance gets passed to widget through this very attribute
array events = array()

Array of Javascript event handlers in format "event_name" => "Javascript code for handler". This handlers will be attached to input element.

volatile Note that the presence of this option encourages to write Javascript code inside your view files, so most possibly we will completely remove it in future versions.

Examples of usage

Raw timepicker (no icon)

$this->widget(
    'booster.widgets.TbTimePicker',
    array(
        'name' => 'some_time',
        'value' => '11:15 PM',
        'noAppend' => true,
        'wrapperHtmlOptions' => array('class' => 'col-md-3'),
    )
);

Disabled manual input

$this->widget(
    'booster.widgets.TbTimePicker',
    array(
        'name' => 'some_time',
        'value' => '23:11',
        'noAppend' => true, // mandatory
        'options' => array(
            'disableFocus' => true, // mandatory
            'showMeridian' => false // irrelevant
        ),
        'wrapperHtmlOptions' => array('class' => 'col-md-3'),
    )
);

24-hour timepicker:

$this->widget(
    'booster.widgets.TbTimePicker',
    array(
        'model' => new Person,
        'attribute' => 'hours',
        'options' => array(
            'showMeridian' => false
        ),
        'wrapperHtmlOptions' => array('class' => 'col-md-3'),
    )
);

Inside a vertical-style form

$form = $this->beginWidget(
    'booster.widgets.TbActiveForm',
    array('type' => $form_type)
);
echo $form->timepickerGroup(
    $model,
    $attr,
    array(
        'widgetOptions' => array(
    		    'options' => array('showMeridian' => false),
    		    'wrapperHtmlOptions' => array('class' => 'col-md-3'),
		    )
        )
    );
$this->endWidget();

Inside a horizontal-style form

$form = $this->beginWidget(
    'booster.widgets.TbActiveForm',
    array('type' => $form_type)
);
echo $form->timepickerGroup(
    $model,
    $attr,
    array(
        'widgetOptions' => array(
    		    'options' => array('showMeridian' => false),
    		    'wrapperHtmlOptions' => array('class' => 'col-md-3'),
		    )
        )
    );
$this->endWidget();

Inside an inline-style form

$form = $this->beginWidget(
    'booster.widgets.TbActiveForm',
    array('type' => $form_type)
);
echo $form->timepickerGroup(
    $model,
    $attr,
    array(
        'widgetOptions' => array(
    		    'options' => array('showMeridian' => false),
    		    'wrapperHtmlOptions' => array('class' => 'col-md-3'),
		    )
        )
    );
$this->endWidget();