Date Picker

Smart input for dates

Description

This widget is a wrapper around the excellent bootstrap-datepicker library. It's not the probably your favorite jQuery UI datepicker, it's visual appearance is closer to Twitter Bootstrap (2.3.2 at least).

Datepicker widget is probably the most famous widget out there in web design world so most possibly you already know how to use it.

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.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbDatePicker',
    array(
        'name' => 'some_date',
        'htmlOptions' => array('class'=>'col-md-4'),
    )
);

Widget Configuration

Here's all configuration properties which you can set for TbDatePicker 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-datepicker. See the library documentation for list of all possible options.
array htmlOptions = array() HTML attributes of the input tag itself. See CInputWidget.htmlOptions
TbActiveForm form = null You can pass the TbActiveForm instance here to help the widget automatically generate proper name attribute. Actually, when you make DatePicker using the TbActiveForm.datepickerRow() 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

Different languages

$this->widget(
    'booster.widgets.TbDatePicker',
    array(
        'name' => 'some_date_jap',
        'options' => array(
            'language' => 'ja'
        )
    )
);

Datepicker together with Editable Field of date type

Conflict resolution This example is important because X-Editable library used for our Editable Field widget has it's own Datepicker widget included.

Before editable date field:

$this->widget(
    'booster.widgets.TbDatePicker',
    array(
        'model' => $model,
        'attribute' => 'someDateAttribute',
        'options' => array(
            'language' => 'ar'
        )
    )
);
$this->widget(
    'booster.widgets.TbEditableField',
    array(
        'type' => 'date',
        'model' => $model,
        'attribute' => 'someDateAttribute',
        'url' => $endpoint, //url for submit data
        'placement' => 'right',
        'format' => 'yyyy-mm-dd',
        'viewformat' => 'mm/dd/yyyy',
        'options' => array(
            'datepicker' => array(
                'language' => 'he'
            )
        ),
    )
);

Note As you probably can see, even if Editable Field has language explicitly declared, its datepicker is still in English. This is a known bug and it'll be resolved one day.