9. Cómo agregar un selector de fechas en Filament 5 – Capturando fechas de nacimiento con calendario interactivo

Hoy vas a agregar un campo de fecha profesional. Olvídate de que los usuarios escriban fechas en formatos raros como «15/02/2024» o «Feb 15, 2024». Ahora tendrán un calendario elegante donde solo tienen que hacer clic en el día deseado.

🎯 Objetivo de hoy

Agregar un campo de fecha de nacimiento usando DatePicker::make('birth_date') en CustomerForm.php.

🖥️ Antes / Después

Antes: No hay forma de guardar la fecha de nacimiento. Si usaras un texto normal, cada usuario escribiría la fecha diferente: «15-02-1990», «02/15/1990», «15 de febrero», etc.

Después: Un campo con icono de calendario que abre un datepicker elegante. Al hacer clic, aparece un calendario mensual para navegar y seleccionar la fecha perfecta. El formato siempre será consistente en la base de datos.

📁 Estructura de carpetas (mapa de hoy)

app/Filament/Resources/
└── Customers/                    ⚪ Carpeta del Resource
    ├── CustomerResource.php      ⚪ No lo tocamos hoy
    ├── Pages/                    ⚪ No lo tocamos hoy
    |   ├── CreateCustomer.php   ⚪ No lo tocamos hoy
    |   ├── EditCustomer.php     ⚪ No lo tocamos hoy
    |   └── ListCustomers.php    ⚪ No lo tocamos hoy
    ├── Schemas/
    |   └── CustomerForm.php      🟡 🎯 AQUÍ TRABAJAMOS HOY
    └── Tables/
        └── CustomersTable.php   ⚪ No lo tocamos hoy

Hoy modificamos solo el archivo marcado con 🟡. Los demás archivos existen pero no los tocaremos.

📋 Paso 1: Tu código de ayer

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
                TextInput::make('phone')
                    ->numeric(),
            ]);
    }
}

➕ Paso 2: Tu ladrillo de hoy (3 líneas)

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

// 🔧 Implementamos: Campo de fecha de nacimiento
// Agregamos DatePicker para seleccionar fechas con calendario
use Filament\Forms\Components\DatePicker;

DatePicker::make('birth_date'),

El componente DatePicker renderiza un campo con icono de calendario. Al hacer clic, abre un popup con calendario navegable. Necesitamos importarlo primero con use.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo modificado

Ruta completa: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
                TextInput::make('phone')
                    ->numeric(),
                DatePicker::make('birth_date'),
            ]);
    }
}

🎉 Verifica tu magia

Abre tu navegador en /admin/customers/create y deberías ver:

• Un cuarto campo llamado «Birth date» con un icono de calendario a la derecha
• Haz clic en el campo → Aparece un calendario mensual elegante
• Navega entre meses con las flechas ← →
• Haz clic en un día → El calendario se cierra y la fecha aparece formateada
• El formato mostrado es tipo «Feb 15, 2024» pero en la base de datos se guarda como «2024-02-15»

¿No ves el calendario? Revisa que hayas agregado el use Filament\Forms\Components\DatePicker; al inicio del archivo, junto a los otros imports.

---

💬 ¿Viste ese calendario aparecer? Con solo tres líneas, tu formulario parece de una aplicación enterprise. Los usuarios adorarán no tener que escribir fechas manualmente.

Mañana aprenderemos a agregar un área de texto grande para notas. ¿Te animas a seguir construyendo?

📖 Fuente: Filament DatePicker

➡️ Próximo paso: Agregar campo de texto largo para notas con Textarea::make('notes').