Skip to main content

​
Overview

The DateFilter class provides a single date picker input for filtering by a specific date. It uses the native HTML5 date input and applies a whereDate query.

​
Creating a DateFilter

​
make
static method
required
Creates a new DateFilter instance.
​
field
string
required
The database column name to filter on
DateFilter::make('created_at')

​
Available Methods

​
label

​
label
method
Sets the display label for the filter.
​
label
string
required
The label text to display
DateFilter::make('created_at')
    ->label('Created On')

​
minDate

​
minDate
method
Sets the minimum selectable date.
​
date
string
required
Minimum date in ‘Y-m-d’ format
DateFilter::make('event_date')
    ->minDate('2020-01-01')

​
maxDate

​
maxDate
method
Sets the maximum selectable date.
​
date
string
required
Maximum date in ‘Y-m-d’ format
DateFilter::make('event_date')
    ->maxDate('2030-12-31')

​
key

​
key
method
Overrides the internal key used for the filter.
​
key
string
required
Custom key identifier
DateFilter::make('order.date')
    ->key('order_date_filter')

​
default

​
default
method
Sets a default date value for the filter.
​
value
mixed
required
The default date value (string in ‘Y-m-d’ format)
DateFilter::make('published_at')
    ->default('2024-01-01')

​
initialValue

​
initialValue
method
Sets an initial date value that is pre-applied when the table first loads.
​
value
mixed
required
The initial date value (string in ‘Y-m-d’ format)
DateFilter::make('created_at')
    ->initialValue(now()->format('Y-m-d'))

​
filter

​
filter
method
Provides a custom query callback to override the default filter behavior.
​
callback
Closure
required
A closure that receives Builder $query and mixed $value (date string) and returns the modified Builder
DateFilter::make('expires_at')
    ->label('Expires After')
    ->filter(function (Builder $query, mixed $value) {
        return $query->whereDate('expires_at', '>', $value);
    })

​
groupClass / labelClass / inputClass

​
groupClass
method
Sets CSS classes for the filter wrapper, label, or input element.
DateFilter::make('created_at')
    ->groupClass('col-md-4')
    ->labelClass('font-semibold')
    ->inputClass('form-control-sm')

​
Value Format

Date values are expected in Y-m-d format: 
'2024-03-15'

​
Value Clamping

Date values are automatically clamped to stay within minDate/maxDate bounds: 
DateFilter::make('event_date')
    ->minDate('2024-01-01')
    ->maxDate('2024-12-31')
If a user manually enters 2025-05-15, it will be clamped to 2024-12-31.

​
Default Behavior

By default, DateFilter applies a whereDate query: 
$query->whereDate($fieldName, $clampedValue)
This matches records where the date portion of the field equals the selected date.

​
Complete Examples

​
Basic Usage

use Livewire\Tables\Filters\DateFilter;

public function filters(): array
{
    return [
        DateFilter::make('created_at')
            ->label('Created On')
            ->minDate('2020-01-01')
            ->maxDate('2030-12-31'),

        DateFilter::make('published_at')
            ->label('Published On'),

        DateFilter::make('expires_at')
            ->label('Expires On')
            ->minDate(now()->format('Y-m-d')),
    ];
}

​
Custom Filter Logic

use Livewire\Tables\Filters\DateFilter;
use Illuminate\Database\Eloquent\Builder;

public function filters(): array
{
    return [
        DateFilter::make('created_at')
            ->label('Created After')
            ->filter(function (Builder $query, mixed $value) {
                return $query->whereDate('created_at', '>=', $value);
            }),

        DateFilter::make('expires_at')
            ->label('Active On Date')
            ->filter(function (Builder $query, mixed $value) {
                return $query->whereDate('starts_at', '<=', $value)
                             ->whereDate('expires_at', '>=', $value);
            }),

        DateFilter::make('last_login')
            ->label('Last Login Before')
            ->filter(function (Builder $query, mixed $value) {
                return $query->whereDate('last_login_at', '<', $value);
            }),
    ];
}

​
Usage in Table Component

use App\Models\Order;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Tables\Filters\DateFilter;
use Livewire\Tables\Filters\SelectFilter;
use Livewire\Tables\Livewire\DataTableComponent;

class OrdersTable extends DataTableComponent
{
    public function query(): Builder
    {
        return Order::query();
    }

    public function filters(): array
    {
        return [
            DateFilter::make('created_at')
                ->label('Order Date')
                ->minDate('2020-01-01'),

            DateFilter::make('shipped_at')
                ->label('Shipped On'),

            SelectFilter::make('status')
                ->label('Status')
                ->setOptions([
                    'pending'   => 'Pending',
                    'shipped'   => 'Shipped',
                    'delivered' => 'Delivered',
                ]),
        ];
    }
}

​
Dynamic Date Constraints

use Livewire\Tables\Filters\DateFilter;

public function filters(): array
{
    return [
        // Only allow future dates
        DateFilter::make('event_date')
            ->label('Event Date')
            ->minDate(now()->format('Y-m-d')),

        // Only allow dates in the current year
        DateFilter::make('created_at')
            ->label('Created This Year')
            ->minDate(now()->startOfYear()->format('Y-m-d'))
            ->maxDate(now()->endOfYear()->format('Y-m-d')),

        // Only allow past dates
        DateFilter::make('completed_at')
            ->label('Completed On')
            ->maxDate(now()->format('Y-m-d')),
    ];
}

​
UI Rendering

The filter renders a native HTML5 date input (<input type="date">), which provides a consistent date picker across browsers. The exact appearance depends on your browser and theme (Tailwind, Bootstrap 5, or Bootstrap 4).

Build docs developers (and LLMs) love

Get started for freeTalk to us