Saltar al contenido principal

Date-time picker

Introducción​

El selector de fecha y hora proporciona una interfaz interactiva para seleccionar una fecha y/o una hora.

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\TimePicker;

DateTimePicker::make('published_at')
DatePicker::make('date_of_birth')
TimePicker::make('alarm_at')

Personalizar el formato de almacenamiento​

Puedes personalizar el formato del campo cuando se guarda en tu base de datos usando el método format(). Este acepta un string de formato de fecha, usando tokens de formato de fecha de PHP:

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->format('d/m/Y')
Inyección de utilidades

Además de permitir un valor estático, el método format() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Deshabilitar la entrada de segundos​

Al usar el selector de tiempo, puedes deshabilitar la entrada de segundos usando el método seconds(false):

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->seconds(false)
Inyección de utilidades

Además de permitir un valor estático, el método seconds() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Zonas horarias​

Si quieres que los usuarios puedan gestionar fechas en su propia zona horaria, puedes usar el método timezone():

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->timezone('America/New_York')

Aunque las fechas seguirán almacenándose usando la zona horaria configurada de la aplicación, la fecha ahora se cargará en la nueva zona horaria y se convertirá de vuelta cuando se guarde el formulario.

Inyección de utilidades

Además de permitir un valor estático, el método timezone() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Si no pasas un timezone() al componente, usará la zona horaria predeterminada de Filament. Puedes establecer la zona horaria predeterminada de Filament usando el método FilamentTimezone::set() en el método boot() de un service provider como AppServiceProvider:

use Filament\Support\Facades\FilamentTimezone;

public function boot(): void
{
    FilamentTimezone::set('America/New_York');
}

Esto es útil si quieres establecer una zona horaria predeterminada para todos los selectores de fecha y hora en tu aplicación. También se usa en otros lugares donde se usan zonas horarias en Filament.

aviso

La zona horaria predeterminada de Filament solo se aplicará cuando el campo almacene una hora. Si el campo almacena solo una fecha (DatePicker en lugar de DateTimePicker o TimePicker), la zona horaria no se aplicará. Esto es para evitar cambios de zona horaria al almacenar fechas sin horas.

Habilitar el selector de fecha en JavaScript​

Por defecto, Filament usa el selector de fecha nativo de HTML5. Puedes habilitar un selector de fecha en JavaScript más personalizable usando el método native(false):

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->native(false)
Inyección de utilidades

Además de permitir un valor estático, el método native() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

info

El selector de fecha en JavaScript no admite entrada completa por teclado de la misma manera que el selector de fecha nativo. Si necesitas entrada completa por teclado, deberías usar el selector nativo.

Personalizar el formato de visualización​

Puedes personalizar el formato de visualización del campo, por separado del formato usado cuando se guarda en tu base de datos. Para esto, usa el método displayFormat(), que también acepta un string de formato de fecha, usando tokens de formato de fecha de PHP:

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->native(false)
    ->displayFormat('d/m/Y')
Inyección de utilidades

Además de permitir un valor estático, el método displayFormat() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

También puedes configurar la localización que se usa al renderizar la visualización, si quieres usar una localización distinta a la de la configuración de tu app. Para esto, puedes usar el método locale():

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->native(false)
    ->displayFormat('d F Y')
    ->locale('fr')
Inyección de utilidades

Además de permitir un valor estático, el método locale() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Configurar los intervalos de entrada de tiempo​

Puedes personalizar el intervalo de entrada para incrementar/decrementar horas/minutos/segundos usando los métodos hoursStep(), minutesStep() o secondsStep():

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->native(false)
    ->hoursStep(2)
    ->minutesStep(15)
    ->secondsStep(10)
Inyección de utilidades

Además de permitir valores estáticos, los métodos hoursStep(), minutesStep() y secondsStep() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en las funciones como parámetros.

Configurar el primer día de la semana​

En algunos países, el primer día de la semana no es lunes. Para personalizar el primer día de la semana en el selector de fecha, usa el método firstDayOfWeek() en el componente. Se aceptan valores del 0 al 7, con lunes como 1 y domingo como 7 o 0:

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->native(false)
    ->firstDayOfWeek(7)
Inyección de utilidades

Además de permitir un valor estático, el método firstDayOfWeek() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Hay, además, métodos helper convenientes para establecer el primer día de la semana de forma más semántica:

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->native(false)
    ->weekStartsOnMonday()

DateTimePicker::make('published_at')
    ->native(false)
    ->weekStartsOnSunday()

Deshabilitar fechas específicas​

Para evitar que se seleccionen fechas específicas:

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('date')
    ->native(false)
    ->disabledDates(['2000-01-03', '2000-01-15', '2000-01-20'])
Inyección de utilidades

Además de permitir un valor estático, el método disabledDates() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Cerrar el selector cuando se elige una fecha​

Para cerrar el selector cuando se elige una fecha, puedes usar el método closeOnDateSelection():

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('date')
    ->native(false)
    ->closeOnDateSelection()

Opcionalmente, puedes pasar un valor booleano para controlar si el input debe cerrarse cuando se elige una fecha o no:

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('date')
    ->native(false)
    ->closeOnDateSelection(FeatureFlag::active())
Inyección de utilidades

Además de permitir un valor estático, el método closeOnDateSelection() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Autocompletar fechas con un datalist​

A menos que estés usando el selector de fecha en JavaScript, puedes especificar opciones de datalist para un selector de fecha usando el método datalist():

use Filament\Forms\Components\TimePicker;

TimePicker::make('appointment_at')
    ->datalist([
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
    ])

Los datalists proporcionan opciones de autocompletar a los usuarios cuando usan el selector. Sin embargo, son recomendaciones, y el usuario aún puede escribir cualquier valor en el input. Si buscas limitar estrictamente a un conjunto de opciones predefinidas, revisa el campo select.

Inyección de utilidades

Además de permitir un valor estático, el método datalist() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Enfocar una fecha predeterminada del calendario​

Por defecto, si el campo no tiene estado, al abrir el panel del calendario se abrirá en la fecha actual. Esto puede no ser conveniente cuando quieres abrir el calendario en una fecha específica. Puedes usar defaultFocusedDate() para establecer una fecha enfocada predeterminada en el calendario:

use Filament\Forms\Components\DatePicker;

DatePicker::make('custom_starts_at')
    ->native(false)
    ->placeholder(now()->startOfMonth())
    ->defaultFocusedDate(now()->startOfMonth())
Inyección de utilidades

Además de permitir un valor estático, el método defaultFocusedDate() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Añadir texto afijo junto al campo​

Puedes colocar texto antes y después del input usando los métodos prefix() y suffix():

use Filament\Forms\Components\DatePicker;

DatePicker::make('date')
    ->prefix('Starts')
    ->suffix('at midnight')
Inyección de utilidades

Además de permitir valores estáticos, los métodos prefix() y suffix() también aceptan una función para calcularlos dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Usar iconos como afijos​

Puedes colocar un icono antes y después del input usando los métodos prefixIcon() y suffixIcon():

use Filament\Forms\Components\TimePicker;
use Filament\Support\Icons\Heroicon;

TimePicker::make('at')
    ->prefixIcon(Heroicon::Play)
Inyección de utilidades

Además de permitir valores estáticos, los métodos prefixIcon() y suffixIcon() también aceptan una función para calcularlos dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Establecer el color del icono afijo​

Los iconos afijos son grises por defecto, pero puedes establecer un color diferente usando los métodos prefixIconColor() y suffixIconColor():

use Filament\Forms\Components\TimePicker;
use Filament\Support\Icons\Heroicon;

TimePicker::make('at')
    ->prefixIcon(Heroicon::CheckCircle)
    ->prefixIconColor('success')
Inyección de utilidades

Además de permitir valores estáticos, los métodos prefixIconColor() y suffixIconColor() también aceptan una función para calcularlos dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Hacer el campo de solo lectura​

Para no confundir con deshabilitar el campo, puedes hacer que el campo sea "solo lectura" usando el método readonly():

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->readonly()

Ten en cuenta que esta configuración solo se aplica a selectores de fecha nativos. Si estás usando el selector de fecha en JavaScript, necesitarás usar disabled().

Hay algunas diferencias en comparación con disabled():

  • Cuando usas readOnly(), el campo aún se enviará al servidor cuando se envíe el formulario. Puede ser mutado con la consola del navegador o via JavaScript. Puedes usar dehydrated(false) para prevenir esto.
  • No hay cambios de estilo, como menor opacidad, cuando usas readOnly().
  • El campo aún es enfocable cuando usas readOnly().

Opcionalmente, puedes pasar un valor booleano para controlar si el campo debe ser de solo lectura o no:

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->readOnly(FeatureFlag::active())
Inyección de utilidades

Además de permitir un valor estático, el método readOnly() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Validación del selector de fecha y hora​

Además de todas las reglas listadas en la página de validación, hay reglas adicionales específicas para los selectores de fecha y hora.

Validación de fecha máxima / mínima​

Puedes restringir la fecha mínima y máxima que se puede seleccionar con el selector. Los métodos minDate() y maxDate() aceptan una instancia de DateTime (por ejemplo, Carbon), o un string:

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->native(false)
    ->minDate(now()->subYears(150))
    ->maxDate(now())
Inyección de utilidades

Además de permitir valores estáticos, los métodos minDate() y maxDate() también aceptan funciones para calcularlos dinámicamente. Si las funciones devuelven null, la regla de validación no se aplica. Puedes inyectar varias utilidades en las funciones como parámetros.