Tutorial de implementación de calendario de rango de fechas con Karkit en gridView

Tutorial de implementación de calendario de rango de fechas con Karkit en gridView.

Artículo actualizado: 12 de Marzo de 2024

Este tutorial muestra un ejemplo de cómo implementar el calendario de karkit de rango de fechas dentro de un filtro de un gridView.

Nota importante: Esta es una adaptación no oficial del uso del calendario dentro de un gridview, ya que en la documentación oficial


Que para los que van comenzando con Yii2 podría resultar un poco tardado y no encontré un tutorial que lo explicara de forma clara.

Asi pues les dejo este tutorial esperando que les sea de utilidad.


PASO # 1 .- Agregar la columna para el calendario del gridview.

Se debe de agregar dentro de la vista la columna donde irá el filtro, recordar que se tiene que agregar previamente el componente de karkit dentro de la vista.

Deberá tener instalada el siguiente plugin


use kartik\daterange\DateRangePicker;

[
                'label' => Yii::t('app/view', 'Fecha Inicial'),
                'value' => 'fecha_inicio',
                'filter' =>
                DateRangePicker::widget([
                    'name' => 'createTimeRange',
                    'attribute' => 'datetime_range',
                    'convertFormat' => true,
                    //'startAttribute'=> date('Y-m-d h:i'),
                    //'endAttribute'=>date('Y-m-d h:i'),
                    'presetDropdown' => true,
                    'pluginOptions' => [
                        'timePicker' => true,
                        'timePickerIncrement' => 1,
                        'locale' => [
                            'format' => 'Y-m-d h:i:s'
                        ]
                    ]
                ])
            ],

Nota importante:

Dentro del método "search()" del modelo "Search" se puede manipular un parámetro que es definido en la vista, este parámetro tiene un nombre y es definido en la siguiente línea:

//Ejemplo del parámetro definido en la vista y que es usando para guardar el rango de fechas

 DateRangePicker::widget([
   ......
   'name' => 'createTimeRange',
   .....
 ])

Paso # 2 .- Configurar el ModelSearch.

Para que pueda trabajar éste componente es necesario agrear algunos filtros en el Model Search de tu modelo que utilices, recuerda que si utilizaste el gii para crear tu crud te debió haber generado una clase cuyo nombre termina con "Search" ejemplo:  "NombreModeloSearch.php", en caso de que no tengas esa clase podrías crearla con gii.

La variable que se encuentre definida con ese nombre contendrá un string con las dos fechas que el usuario haya escrito en formato de texto.

 

  // Clase necesaria para implementar
use kartik\daterange\DateRangeBehavior;

class EjemploSearch extends Ejemplo

{

//Agregar metodos publicos
    public $createTimeRange;
    public $createTimeStart;
    public $createTimeEnd;

    // Método behavios importado de karkit
    public function behaviors()
    {
        return [
            [
                'class' => DateRangeBehavior::className(), 
                'attribute' => 'createTimeRange', //Crea atributo
                'dateStartAttribute' => 'createTimeStart', //Crea atributo de fecha inicial
                'dateEndAttribute' => 'createTimeEnd', //Crea atributo de fecha final
            ]
        ];
     }

    // .... código de clase 


}// Fin clase Search

En el método search() dentro de la clase "EjemploSearch.php", deberá agregar las siguientes líneas justo después del bloque condiciones para los filtros.

 // .... Inclusiones de librerías  

 class EjemploSearch extends Ejemplo

{

 // .... código de clase 

  public function search($params){

   // .... código de clase 

   //Convierte la cadena en un arreglo con las dos fechas
    $fechas = explode(' - ', $params["createTimeRange"]); 
    if( (bool)strtotime($fechas[0]) && (bool)strtotime($fechas[1]) ){
     $this->createTimeStart = $fechas[0];
        $this->createTimeEnd = $fechas[1];
    }
        
    // Agregar condicion de rango de fechas 
    $query->andFilterWhere(['>=', 'fecha_pago', $this->createTimeStart])
    ->andFilterWhere(['<', 'fecha_pago', $this->createTimeEnd]); 


     // .... código de clase  

    return $dataProvider;
  }

 // .... código de clase 

}

Fuentes: 

https://github.com/kartik-v/yii2-date-range