How to add a date range picker to filter for dates on a GridView for Yii2

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.