Calendario

Vista de calendario. Admite tres modos de selección — un día, un rango de tiempo y selección múltiple —; range acota las fechas seleccionables. El modo panel siempre está visible, mientras que el modo input se contrae en un campo de texto que se expande al hacer clic (el panel se monta en el body).

Calendario

<template>
  <div class="demo-col" style="max-width: none">
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap">
      <LhCalendar v-model="single" selection="single" />
      <LhCalendar v-model="span" selection="range" mode="input" placeholder="Selecciona un rango de tiempo" />
    </div>
    <p class="demo-note">Selección única: {{ fmt(single) }} | Rango de tiempo: {{ fmtArr(span) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="multi" selection="multiple" :panels="2" :close-on-select="false" />
      <LhCalendar v-model="strict" selection="range" mode="panel" />
    </div>
    <p class="demo-note">Selección múltiple (panels=2 muestra dos paneles; closeOnSelect=false no cierra el panel): {{ fmtArr(multi) }}</p>
    <p class="demo-note">Modo panel range (mode="panel"): {{ fmtArr(strict) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="clamped" selection="single" :range="bounds" />
    </div>
    <p class="demo-note">range acota el intervalo seleccionable (solo 2026-10-01 ~ 2026-10-15 son seleccionables): {{ fmt(clamped) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: new Date(2026, 9, 3),
    span: [],
    multi: [],
    strict: [],
    clamped: new Date(2026, 9, 5),
    bounds: [new Date(2026, 9, 1), new Date(2026, 9, 15)],
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleDateString('zh-CN') : '(sin selección)'
    },
    fmtArr(v) {
      if (!Array.isArray(v) || v.length === 0) return '(sin selección)'
      return v.map((d) => d.toLocaleDateString('zh-CN')).join(' ~ ')
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Selección actual; un Date en la selección única y un Date[] para un rango o la selección múltiple	Date \| Date[]	—
selection	Modo de selección	'single' \| 'range' \| 'multiple'	'single'
range	Rango de fechas seleccionables [start, end]; las fechas externas se deshabilitan	[Date, Date]	—
mode	Forma de presentación: panel para un panel siempre visible / input para un campo de texto colapsado	'panel' \| 'input'	'panel'
panels	Número de paneles de mes mostrados a la vez (dispuestos con flex wrap)	number	1
placeholder	Texto del marcador de posición para el modo input	string	paquete de idioma
closeOnSelect	Si el modo input se colapsa automáticamente tras la selección	boolean	true
sx	Propiedades de layout abreviadas	—	—

Events

input (v-model), change (value), select (date)

Slots

Slot	Descripción
header	Cabecera del panel de mes; parámetro de ámbito { year, month } (por defecto renderiza "YYYY 年 M 月")
cell	Celda de fecha; parámetro de ámbito { date } (por defecto renderiza el número del día)

Accesibilidad

El panel es role="grid", la fila de días de la semana es role="row" y las celdas de fecha son role="gridcell"; las fechas deshabilitadas llevan aria-disabled, y el disparador del modo input permite abrirlo con el teclado y desplazarse con las flechas.