Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Búsqueda con Fechas en Gridview III

Tags: fecha

Hola, ¿cómo están?

Hoy les traigo una rápida entrada para responder a un pedido de un lector (Shinku), que me acercaba una duda.

En la entrada anterior, habíamos visto como agregar una búsqueda entre rangos de fechas, añadiendo dos campos: fecha_desde y fecha_hasta, en el formulario _search de la página index de ordenes.

Sin embargo, en la propia grilla, seguíamos manteniendo en la cabecera de la columna fecha, la posibilidad de buscar por un sólo valor.

Particularmente, yo prefiero esta opción porque me permite buscar por un lado, por un rango de fechas (usando el formulario), y por otro por una fecha en particular (grilla) de manera rápida y sencilla para ambos casos.

Sin embargo, puede haber casos en que necesitemos incluir busqueda por rango de fechas en la propia grilla, y eso es lo que vamos a ver hoy.

Introduciremos, para ello, un nuevo widget muy útil: DateRangePicker.

Manos a la obra

En primer lugar, debemos instalar el widget. Para ello, agregaremos la siguiente línea al final de la sección require de nuestro archivo composer.json:

“kartik-v/yii2-date-range”: “dev-master”

Luego, ejecutaremos el correspondiente composer update desde la consola, siempre parados en la raíz de nuestro proyecto.

Cuando la instalación haya terminado, dirijámonos al archivo frontend/models/OrdenSearch.

Allí, deberemos agregar una nueva propiedad pública:

$public $rango_fecha;

Estamos declarando la variable que contendrá el rango de fechas a partir del cual realizaremos la búsqueda.

Recordemos, que para que este nuevo atributo pueda ser usado en las búsquedas, debemos declararlo como “safe”.

Aquí está el método completo rules del modelo OrdenSearch como referencia:

public function rules()
{
    return [
        [['id', 'cliente_id'], 'integer'],
        [['fecha', 'rango_fecha', 'fecha_desde', 'fecha_hasta', 'estado'], 'safe'],
    ];
}

Ahora debemos realizar cambios en frontend/views/orden/index.php

En este momento, tenemos el siguiente código para nuestra Gridview:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'id',
        'cliente_id',
        //'fecha',
        [
            'attribute' => 'fecha',
            'value' => 'fecha',
            'format' => 'raw',
            'options' => ['style' => 'width: 25%;'],
            'filter' => DatePicker::widget([
                'model' => $searchModel,
                'attribute' => 'fecha',
                'options' => ['placeholder' => ''],
                'pluginOptions' => [
                    'id' => 'fecha2',
                    'autoclose'=>true,
                    'format' => 'yyyy-mm-dd',
                    'startView' => 'year',
                ]
            ])
        ],
        'estado',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Lo reemplazaremos por el siguiente:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'id',
        'cliente_id',
        //'fecha',
        [
            'attribute' => 'rango_fecha',
            'value' => 'fecha',
            'format'=>'raw',
            'options' => ['style' => 'width: 25%;'],
            'filter' => DateRangePicker::widget([
                'model' => $searchModel,
                'attribute' => 'rango_fecha',
                'useWithAddon'=>false,
                'convertFormat'=>true,
                'pluginOptions'=>[
                    'locale'=>['format'=>'Y-m-d']
                ],
            ])
        ],
        'estado',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Como siempre, debemos agregar la sentencia use necesaria:

use kartik\daterange\DateRangePicker;

Muy bien. Si todo ha ido de manera correcta, veremos la siguiente pantalla al dirigirnos yii2advanced.com/index.php?r=index:

Si hacemos clic sobre el cuadro de texto Rango Fecha, veremos que se despliega un control compuesto por dos calendarios que permitirán elegir una fecha de inicio y una fecha de fin.

Al elegir las fechas, y luego seleccionar “Aplicar”, veremos que aún no ocurre nada.

Todavía debemos modificar el metodo search del modelo OrdenSearch.

Tengamos en cuenta lo siguiente: supongamos que seleccionamos las fechas ‘2016-01-21’ y ‘2016-02-01’. Entonces, en el método search se recibirá el atributo rango_fecha previamente definido como una cadena con el valor ‘2016-01-21 – 2016-02-01’.

También recordemos, que tenemos dos atributos: fecha_desde y fecha_hasta, que utilizamos para guardar los valores recibidos desde el formulario _search.

Estos atributos, ya cumplen su propósito de realizar el filtrado, gracias a las siguientes líneas que ya están presentes en nuestro método:

$query->andFilterWhere(['>=', 'fecha', $this->fecha_desde]);
$query->andFilterWhere(['<=', 'fecha', $this->fecha_hasta]);

Lo único que resta hacer, entonces, es agregar arriba de esas líneas la lógica para asignar las partes de rango_fecha a fecha_desde y fecha_ hasta.

Hagámoslo de la siguiente manera:

if (isset($this->rango_fecha) && !empty($this->rango_fecha)) {
list($this->fecha_desde, $this->fecha_hasta) = explode(' - ', $this->rango_fecha);}

Si ahora seleccionamos un rango de fechas, veremos que el filtro funciona perfectamente. Como estamos asignando valores a fecha_desde y fecha_hasta, dichos valores estarán visibles en el formulario _search.

Espero que este post les sea de utilidad en sus proyectos.

¡Hasta pronto!

Edición 13/02/2016

Un lector, Shinku, tuvo la amabilidad de señalarme que en la obtención de los valores de fecha_desde y fecha_hasta a partir de rango fecha, había olvidado incluir el control de que rango_fecha además de tener seteado el valor, éste sea no vacío. ( !empty($this->rango_fecha) ). Sin ese control extra se producía un error al borrar el valor rango_fecha luego de haber aplicado el filtro.

¡Gracias a todos por los aportes!




This post first appeared on Yii 2 En Español | Todo Lo Que Necesita Saber Par, please read the originial post: here

Share the post

Búsqueda con Fechas en Gridview III

×

Subscribe to Yii 2 En Español | Todo Lo Que Necesita Saber Par

Get updates delivered right to your inbox!

Thank you for your subscription

×