What is the Bootstrap DatePicker Widget?

The DatePicker widget allows to you use the Bootstrap DatePicker plugin, which is a Bootstrap form component to handle date data, on your forms.

Installation

The preferred way to install this extension is through composer.

Either run

composer require 2amigos/yii2-date-picker-widget:~1.0

or add the following to the require section of your application's composer.json file:

"2amigos/yii2-date-picker-widget" : "~1.0"

Usage example

The widget comes in two flavors:

• DatePicker
• DateRangePicker

DatePicker

This widget renders a Bootstrap DatePicker input control. Best suitable for model with date string attribute.

As a Widget

<?php
use dosamigos\datepicker\DatePicker;
?>

<?= DatePicker::widget([
    'model' => $model,
    'attribute' => 'date',
    'template' => '{addon}{input}',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'dd-M-yyyy'
        ]
]);?>

With an ActiveForm Instance

<?= $form->field($model, 'date')->widget(
    DatePicker::className(), [
        // inline too, not bad
         'inline' => true, 
         // modify template for custom rendering
        'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'dd-M-yyyy'
        ]
]);?>

Without a Model

<?php
use dosamigos\datepicker\DatePicker;
?>
<?= DatePicker::widget([
    'name' => 'Test',
    'value' => '02-16-2012',
    'template' => '{addon}{input}',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'dd-M-yyyy'
        ]
]);?>

DateRangePicker

This widget renders a Bootstrap DateRangePicker Input control.

The following example works with a model that has two attributes named date_from and date_to.

With an ActiveForm Instance

<?php
use dosamigos\datepicker\DateRangePicker;
?>
<?= $form->field($tour, 'date_from')->widget(DateRangePicker::className(), [
    'attributeTo' => 'date_to', 
    'form' => $form, // best for correct client validation
    'language' => 'es',
    'size' => 'lg',
    'clientOptions' => [
        'autoclose' => true,
        'format' => 'dd-M-yyyy'
    ]
]);?>

Without a Model

<?php
use dosamigos\datepicker\DateRangePicker;
?>
<?= DateRangePicker::widget([
    'name' => 'date_from',
    'value' => '02-16-2012',
    'nameTo' => 'name_to',
    'valueTo' => '02-20-2012'
]);?>