K
KoreUI

Datepicker

Form

Selector de fechas completo: modos single, range y multiple con navegación de calendario, time picker, presets, soporte de teclado y formato según locale vía Intl.DateTimeFormat.

Uso básico

<x-kore::datepicker wire:model="date" label="Fecha" placeholder="Selecciona una fecha" clearable />
<x-kore::datepicker wire:model="date" label="Fecha" placeholder="Selecciona una fecha" clearable />

Rango de fechas

Selecciona una fecha de inicio y fin. El hover muestra una vista previa del rango.

<x-kore::datepicker wire:model="dateRange" label="Período" mode="range" clearable />
<x-kore::datepicker wire:model="dateRange" label="Período" mode="range" clearable />

Múltiples fechas

Selecciona fechas individuales hasta un máximo opcional.

<x-kore::datepicker wire:model="dates" label="Fechas" mode="multiple" :multiple-max="5" clearable />
<x-kore::datepicker wire:model="dates" label="Fechas" mode="multiple" :multiple-max="5" clearable />

Fecha y hora

Spinners de tiempo debajo del calendario. El valor se sincroniza como YYYY-MM-DD HH:mm.

<x-kore::datepicker wire:model="dateTime" label="Cita" with-time clearable />

{{-- Formato 12 horas con AM/PM --}}
<x-kore::datepicker wire:model="dateTime" label="Evento" with-time time-format="12" />
<x-kore::datepicker wire:model="dateTime" label="Cita" with-time clearable />

{{-- Formato 12 horas con AM/PM --}}
<x-kore::datepicker wire:model="dateTime" label="Evento" with-time time-format="12" />

Presets

Sidebar de selección rápida para rangos comunes. Solo disponible en modo range.

{{-- Presets por defecto --}}
<x-kore::datepicker wire:model="period" label="Período de reporte" mode="range" :presets="true" clearable />
{{-- Presets por defecto --}}
<x-kore::datepicker wire:model="period" label="Período de reporte" mode="range" :presets="true" clearable />

Helpers

Botones rápidos Ayer/Hoy/Mañana. Solo disponible en modo single.

<x-kore::datepicker wire:model="date" label="Fecha" :helpers="true" />
<x-kore::datepicker wire:model="date" label="Fecha" :helpers="true" />

Multi-mes

Muestra múltiples meses lado a lado. Responsivo por defecto: colapsa a 1 mes en pantallas < 768px.

<x-kore::datepicker wire:model="dates" label="Viaje" mode="range" :months="2" clearable />
<x-kore::datepicker wire:model="dates" label="Viaje" mode="range" :months="2" clearable />

Inline

Calendario siempre visible sin dropdown.

 
<x-kore::datepicker wire:model="date" label="Calendario" inline />
<x-kore::datepicker wire:model="date" label="Calendario" inline />

Restricciones

Limita las fechas seleccionables con rango, días de la semana o fechas específicas.

{{-- Rango de fechas --}}
<x-kore::datepicker label="Solo este año" min-date="2026-01-01" max-date="2026-12-31" />

{{-- Solo días laborables --}}
<x-kore::datepicker label="Días hábiles" :weekdays-only="true" />

{{-- Fechas específicas deshabilitadas --}}
<x-kore::datepicker label="Disponibilidad" :disabled-dates="['2026-03-25', '2026-12-25']" />
{{-- Rango de fechas --}}
<x-kore::datepicker label="Solo este año" min-date="2026-01-01" max-date="2026-12-31" />

{{-- Solo días laborables --}}
<x-kore::datepicker label="Días hábiles" :weekdays-only="true" />

{{-- Fechas específicas deshabilitadas --}}
<x-kore::datepicker label="Disponibilidad" :disabled-dates="['2026-03-25', '2026-12-25']" />

Números de semana

Muestra los números de semana ISO 8601 en una columna a la izquierda.

<x-kore::datepicker label="Fecha" :show-week-numbers="true" />
<x-kore::datepicker label="Fecha" :show-week-numbers="true" />

Entrada manual

Permite escribir la fecha directamente en formato YYYY-MM-DD.

<x-kore::datepicker label="Escribe o selecciona" :manual-input="true" clearable />
<x-kore::datepicker label="Escribe o selecciona" :manual-input="true" clearable />

Confirmación

La selección no se confirma hasta que el usuario hace clic en Aplicar. Cancelar revierte.

<x-kore::datepicker label="Confirmar fecha" :requires-confirmation="true" />
<x-kore::datepicker label="Confirmar fecha" :requires-confirmation="true" />

Tamaños

Tres tamaños disponibles.

<x-kore::datepicker label="Small" size="sm" placeholder="sm" />
<x-kore::datepicker label="Medium" size="md" placeholder="md" />
<x-kore::datepicker label="Large" size="lg" placeholder="lg" />
<x-kore::datepicker label="Small" size="sm" placeholder="sm" />
<x-kore::datepicker label="Medium" size="md" placeholder="md" />
<x-kore::datepicker label="Large" size="lg" placeholder="lg" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del campo
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
size string md Tamaño: sm, md, lg
placeholder string|null null Texto placeholder
clearable bool false Mostrar botón de limpiar
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag
mode string single Modo de selección: single, range, multiple
multipleMax int|null null Máximo de selecciones en modo multiple
minDate string|null null Fecha mínima seleccionable (YYYY-MM-DD)
maxDate string|null null Fecha máxima seleccionable (YYYY-MM-DD)
disabledDates array|null null Fechas deshabilitadas y/o rangos de fechas
disabledWeekdays array|null null Días de la semana deshabilitados (0=Dom, 6=Sáb)
weekdaysOnly bool false Solo días laborables seleccionables
weekendsOnly bool false Solo fines de semana seleccionables
locale string|null null Locale para Intl.DateTimeFormat (null = app locale)
startOfWeek int 1 Primer día de la semana (0=Dom, 1=Lun)
inline bool false Calendario siempre visible (sin dropdown)
months int 1 Número de meses a mostrar lado a lado
responsive bool true Colapsar multi-mes a 1 en móvil (<768px)
showWeekNumbers bool false Mostrar columna de números de semana ISO
withTime bool false Habilitar selector de hora debajo del calendario
timeFormat string 24 Formato de hora: 24 o 12 (AM/PM)
presets bool|array false Sidebar de presets (solo modo range). true para defaults o array personalizado
helpers bool false Botones Ayer/Hoy/Mañana (solo modo single)
manualInput bool false Permitir escribir la fecha directamente
requiresConfirmation bool false Botones Aplicar/Cancelar para confirmar selección

Configuración

Defaults globales en config/kore-ui.php.

config/kore-ui.php 
'form' => [
    'datepicker' => [
        'locale' => null,        // null = app.locale
        'start_of_week' => 1,   // 0=Dom, 1=Lun
        'format' => null,        // null = Intl defaults
    ],
],
'form' => [
    'datepicker' => [
        'locale' => null,        // null = app.locale
        'start_of_week' => 1,   // 0=Dom, 1=Lun
        'format' => null,        // null = Intl defaults
    ],
],