The DateRange picker plugin
For this tutorial we are going to use jino5577/yii2-date-range-picker
. One thing that I highly recommend to any developer is that, whenever he/she can, tests should be provided to increase the trust of other developers to your open source project. I know that sometimes that is practically impossible due to the small we have (I include myself here) but if we can, we should do it. Nevertheless, this is a widget, and for a widget, there is not much to do and this one have never gave me any issues so far.
Enough talking, let's include the library in our composer:
./composer require jino5577/yii2-date-range-picker "*"
In case you are wondering why I am using ./composer
command instead of php composer.phar
is because I have composer installed globally.
The ModelSearch class
Now, let's imagine that your model User
has a created_at
attribute and we want to add a date range filtering on that value. In order to do that, we need first to add a public variable on its UserSearch
class (the class used for filtering), an attribute that will hold the range values to filter our data with:
class UserSearch extends User
{
// This attribute will hold the values to filter our database data
public $created_at_range;
// ....
public function rules()
{
return ArrayHelper::merge(
[
[['created_at_range'], 'safe'] // add a rule to collect the values
],
parent::rules()
);
}
public function search($params)
{
$query = $this->finder->getUserQuery();
$dataProvider = new ActiveDataProvider(
[
'query' => $query,
]);
if (!($this->load($params) && $this->validate())) {
return $dataProvider;
}
// do we have values? if so, add a filter to our query
if(!empty($this->created_at_range) && strpos($this->created_at_range, '-') !== false) {
list($start_date, $end_date) = explode(' - ', $this->created_at_range);
$query->andFilterWhere(['between', 'user.created_at', strtotime($start_date), strtotime($end_date)]);
}
// ... more filters here ...
return $dataProvider
}
}
That's all we have to do to be able to search by a range in our UserSearch
class. Now, the next step is to configure the GridView
column to add our date range picker.
Configuring GridView column
The last part is even easier than before, we simply configure the column of our GridView
as follows:
use jino5577\daterangepicker\DateRangePicker; // add widget
/* @var $searchModel common\models\UserSearch */
// ... lots of code here
<?= GridView::widget([
// ... more code here
'columns' => [
// ... other columns
[
// the attribute
'attribute' => 'created_at',
// format the value
'value' => function ($model) {
if (extension_loaded('intl')) {
return Yii::t('app', '{0, date, MMMM dd, YYYY HH:mm}', [$model->created_at]);
} else {
return date('Y-m-d G:i:s', $model->created_at);
}
},
// some styling?
'headerOptions' => [
'class' => 'col-md-2'
],
// here we render the widget
'filter' => DateRangePicker::widget([
'model' => $searchModel,
'attribute' => 'created_at_range',
'pluginOptions' => [
'format' => 'd-m-Y',
'autoUpdateInput' => false
]
])
],
]
]); ?>
Done, with three simple steps we have now a beautiful date range picker filtering our data by a range.