Calendario

Calendario en vista mensual. Reutiliza el algoritmo de la cuadrícula mensual del core de DatePicker; admite restricción de rango y navegación por la cuadrícula con las teclas de dirección.

Uso básico

Uso básico

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'
const date = ref(new Date())
</script>

<template>
  <LhCalendar v-model="date" />
</template>

<script>
export default {
  data() {
    return { date: new Date() }
  },
}
</script>

<template>
  <LhCalendar v-model="date" />
</template>

Intervalo de fechas y selección múltiple

selection admite tres modos: 'single' (predeterminado) / 'range' (dos clics definen el inicio y el final) / 'multiple' (clics para alternar varias fechas).

Intervalo de fechas

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

nov. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'
const span = ref([new Date(2026, 8, 5), new Date(2026, 8, 20)])
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

<script>
export default {
  data() {
    return { span: [new Date(2026, 8, 5), new Date(2026, 8, 20)] }
  },
}
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

Selección múltiple

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'
const dates = ref([new Date(2026, 8, 10)])
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

<script>
export default {
  data() {
    return { dates: [new Date(2026, 8, 10)] }
  },
}
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

Restricción del rango seleccionable

Restricción de rango

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'

// Nota: en JS los meses empiezan en 0; new Date(2026, 8, 1) es el 1 de septiembre
const range = [new Date(2026, 8, 1), new Date(2026, 8, 28)]
const rangeDate = ref(new Date())
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

<script>
export default {
  data() {
    return {
      // Nota: en JS los meses empiezan en 0; new Date(2026, 8, 1) es el 1 de septiembre
      range: [new Date(2026, 8, 1), new Date(2026, 8, 28)],
      rangeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

Forma contraída input

mode="input" recoge el panel permanente en un campo de entrada que se despliega al hacer clic, ahorrando espacio vertical. panels controla el número de paneles mensuales desplegados, placeholder personaliza el texto del marcador de posición y close-on-select determina si el panel se repliega automáticamente tras la selección.

Forma input + panel doble

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

nov. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'
const inputDate = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Selecciona una fecha"
  />
</template>

<script>
export default {
  data() {
    return { inputDate: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Selecciona una fecha"
  />
</template>

No se repliega automáticamente tras la selección

oct. de 2026

dom.lun.mar.mié.jue.vie.sáb.

<script setup>
import { ref } from 'vue'
const inputDate2 = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="Mantener el panel abierto tras la selección"
  />
</template>

<script>
export default {
  data() {
    return { inputDate2: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="Mantener el panel abierto tras la selección"
  />
</template>

API

LhCalendar Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Fecha seleccionada actualmente (v-model controlado)	Date | Date[]	—
selection	Modo de selección: única (predeterminado) / intervalo (fechas de inicio y fin) / múltiple	"single" | "range" | "multiple"	'single'
range	Restricción del rango de fechas seleccionables	[Date, Date]	—
mode	Forma de presentación	"panel" | "input"	'panel'
panels	Número de paneles mensuales mostrados a la vez (disposición flex con ajuste de línea)	number	1
placeholder	Texto del marcador de posición en modo input	string	—
closeOnSelect	Si el panel se repliega automáticamente tras la selección en modo input	boolean	true
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
update:modelValue	Se dispara cuando cambia el valor seleccionado (v-model)	(value: Date | Date[])
change	Se dispara cuando cambia el valor seleccionado	(value: Date | Date[])
select	Se dispara al seleccionar una fecha (clic o navegación por teclado)	(value: Date)

Slots: cell (celda personalizada), header (cabecera).

Accesibilidad

• Semántica de cuadrícula role="grid" (filas row, celdas gridcell); el día actual lleva aria-current="date"
• Las teclas de dirección mueven el foco por las fechas (±1 día / ±7 días), Home/End van al inicio y al final de la fila, y Re Pág/Av Pág cambian de mes, alineados con el patrón grid de APG
• Las fechas fuera del rango se excluyen de la interacción con disabled nativo

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/calendar/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhCalendarMode

/** Forma de presentación: panel permanente (predeterminado) / input panel contraído que se despliega al hacer clic en el campo */
export type LhCalendarMode = 'panel' | 'input'

LhCalendarValue

/** La forma del valor controlado cambia con selection: única Date / intervalo Date[] (inicio y fin, longitud 2) / múltiple Date[].
 *  No se usa la tupla [Date, Date]: el compilador de SFC no puede inferir el tipo en tiempo de ejecución a partir de la tupla, lo que generaría avisos de validación de props */
export type LhCalendarValue = Date | Date[]

LhCalendarProps

export interface LhCalendarProps {
  /** Selección actual (v-model controlado; si no se pasa, el componente mantiene internamente el estado de selección) */
  modelValue?: LhCalendarValue
  /** Modo de selección: única (predeterminado) / intervalo (fechas de inicio y fin) / múltiple */
  selection?: LhCalendarSelection
  /** Restricción del rango de fechas seleccionables */
  range?: LhCalendarRange
  /** Forma de presentación: panel permanente (predeterminado) / input panel contraído que se despliega al hacer clic en el campo */
  mode?: LhCalendarMode
  /** Número de paneles mensuales mostrados a la vez (disposición flex con ajuste de línea) */
  panels?: number
  /** Texto del marcador de posición en modo input */
  placeholder?: string
  /** Si el panel se repliega automáticamente tras la selección en modo input */
  closeOnSelect?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhCalendarSelection _{(de @lh-ui/share/core/calendar)}

/** Modo de selección: única / intervalo (inicio y fin) / múltiple */
export type LhCalendarSelection = 'single' | 'range' | 'multiple'

LhCalendarRange _{(de @lh-ui/share/core/calendar)}

/** Restricción del rango de fechas seleccionables */
export type LhCalendarRange = [Date, Date]