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'
]);?>