Filament 实用技巧：创建日期筛选下拉框

在使用 Filament 构建后台管理系统时，经常需要添加日期筛选功能。

想象一下有一个需要根据日期筛选的选项，比如 Order 订单，需要根据日期筛选出对应的订单。

利用了 Filament 的 hintAction 功能，通过几个简单的步骤就能创建一个实用的日期筛选器。

创建日期选择器

首先需要在 Select 字段添加一个日期选择的 hintAction 操作，其次需要修改 Select 组件选项的查询条件。

use Filament\Forms\Components\Select;
use App\Filament\Resources\GoodResource\Pages;
use Filament\Forms\Components\Actions\Action;

Select::make('orders')
  ->native(false)
  ->options(fn (Pages\CreateGood|Pages\EditGood $livewire) => Order::query()
    ->when(
      $livewire->orderDate,
      fn ($query, $date) => $query->whereDate('created_at', $date)
		)
    ->limit(25)
    ->latest()
    ->pluck('name', 'id')
  )->hintAction(
    Action::make('date')
      ->label(
        fn (Pages\CreateGood|Pages\EditGood $livewire) => 
        $livewire->orderDate ? __('Date: :date', ['date' => $livewire->orderDate]) : __('Filter by Date')
			)
      ->modalWidth(MaxWidth::Small)
      ->form([
          DatePicker::make('date')
            ->native(false)
            ->live()
            ->default(
              fn (Pages\CreateGood|Pages\EditGood $livewire) => $livewire->orderDate ?? now()
						),
      ])
      ->action(function (Set $set, array $data, Pages\CreateGood|Pages\EditGood $livewire) {
        $livewire->orderDate = $data['date'];
      })
  ),

功能特点

直观的日期选择：使用内置的 DatePicker 组件
实时更新：通过 live() 方法实现即时响应
优雅的显示：当选择日期后，标签会显示所选日期
灵活的查询：支持按日期筛选相关记录
性能优化：限制返回 25 条最新记录

CreateGood 和 EditGood 页面

class CreateGood extends EditRecord
{
    // ...
   public ?string $orderDate = null;
}

class EditGood extends EditRecord
{
    // ...
   public ?string $orderDate = null;
}

这个实现方案展示了通过简洁的代码就能实现一个功能完整的日期筛选器，这正是 Filament 的优势所在。