Otro filtro interesante es el que permite filtrar por rangos de fecha; para esto, vamos a usar dos campos para definir la cota inicial y final para el rango, y recuerda que es necesario convertir al tipo de dato correspondiente (fecha en este caso) para poder realizar las comparaciones correctamente desde el where():
app/Http/Controllers/Dashboard/PostController.php
//***
if (request('from') && request('to')) {
$posts->whereBetween('date', [date(request("from")), date(request("to"))]);
}
//***
Desde el componente en Vue, creamos un par de campos de tipo fecha más para dichos rangos:
resources/js/Pages/Dashboard/Post/Index.vue
<TextInput class="w-full" type="date" placeholder="Date From" v-model="from" />
<TextInput class="w-full" type="date" placeholder="Date To" v-model="to" />
***
<script>
data() {
return {
confirmDeleteActive: false,
deletePostRow: "",
type: "",
category_id: "",
posted: "",
search: "",
from: "",
to: "",
};
},
***
router.get(
route("post.index", {
category_id: this.category_id,
type: this.type,
posted: this.posted,
search: this.search,
from: this.from,
to: this.to,
})
);
***
</script>
La siguiente operación que vamos a realizar sería la de filtrar por un Rango de fecha ya entramos en algo un poco más interesante que simplemente un Rango una selección que es una comparación simple mediante un web en el caso del Rango de fechas que es otra vez es lo que queremos.
<TextInput class="w-full" type="date" placeholder="Date From" v-model="from" />
<TextInput class="w-full" type="date" placeholder="Date To" v-model="to" />
***
<script>
data() {
return {
confirmDeleteActive: false,
deletePostRow: "",
type: "",
category_id: "",
posted: "",
search: "",
from: "",
to: "",
};
},
***
router.get(
route("post.index", {
category_id: this.category_id,
type: this.type,
posted: this.posted,
search: this.search,
from: this.from,
to: this.to,
})
);
***
</script>
Desde el controlador, empleamos aquí la función de date que permite castear esto a una fecha la fecha No deberíamos tener ningún problema porque ya estamos empleando el formato en inglés bueno ahorita lo vamos a emplear que es la fecha por defecto el formato por defecto es lo que recibe aquí lo castea directo por lo demás aquí tenemos los campos no tiene nada de raro de tipo date viene siendo lo importante para que tengamos ahí el calendario de selección en html5:
//***
if (request('from') && request('to')) {
$posts->whereBetween('date', [date(request("from")), date(request("to"))]);
}
//***
Otro detalle importante es que, en Laravel recibimos un String con el formato ano mes y día listo para ser manejado desde Laravel.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros