Filter by whereBetween Date Ranges in Laravel Inertia

Another interesting filter is the one that allows you to filter by date ranges; for this, we are going to use two fields to define the initial and final bounds for the range, and remember that it is necessary to convert to the corresponding data type (date in this case) to be able to carry out the comparisons correctly from where():

app/Http/Controllers/Dashboard/PostController.php

//***
if (request('from') && request('to')) {
   $posts->whereBetween('date', [date(request("from")), date(request("to"))]);
}
//***

From the component in Vue, we create a couple more date fields for these ranges:

<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>

Video Transcript

The next operation that we are going to perform would be to filter by a Date Range We are now entering something a little more interesting than just a Range a selection that is a simple comparison using a web in the case of the Date Range which is again what we want:

<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>

From the controller we use the date function here that allows us to cast this to a date The date should not have any problems because we are already using the English format Well right now we are going to use it which is the default date The default format is what is received here it is cast directly Otherwise here we have the fields there is nothing strange about the date type which is what is important so that we have the selection calendar in HTML5:

//***
if (request('from') && request('to')) {
   $posts->whereBetween('date', [date(request("from")), date(request("to"))]);
}
//***

Another important detail is that in Laravel we receive a String with the year month and day format ready to be handled from Laravel.

06-10-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Filter by whereBetween Date Ranges in Laravel Inertia