Selector de fecha

Selector de fecha. Cinco modos: date / month / year / datetime / range. Dentro del panel se puede profundizar de nivel en nivel (fecha → mes → año); datetime añade debajo del calendario una columna de tiempo (horas, minutos y segundos, en rueda o al hacer clic, que se combinan con la fecha al confirmar); range es una selección en dos pasos (el primer clic fija y resalta el inicio, y el segundo normaliza el intervalo y resalta los días intermedios). El panel se monta en el body y format controla el formato mostrado.

Selector de fecha

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="Selecciona una fecha" format="dd/MM/yyyy" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="Selecciona un mes" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="Selecciona un año" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="Selecciona fecha y hora" disabled />
      <LhDatePicker v-model="date" placeholder="Solo lectura" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="hasta"
      placeholder="Selecciona un rango de fechas (dos clics)"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      Fecha: {{ fmt(date) }} | Mes: {{ fmt(month) }} | Año: {{ fmt(year) }} | Fecha y hora: {{ fmt(datetime) }}
    </p>
    <p class="demo-note">Rango de fechas (rangeSeparator="hasta", fines de semana en rojo): {{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('zh-CN', { hour12: false }) : '(sin selección)'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return '(sin selección)'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('zh-CN', { hour12: false }) : '(sin selección)')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Selección actual	Date \| [Date, Date] \| null	—
mode	Modo: fecha / mes / año / fecha y hora / rango de fechas	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Deshabilitado / se puede vaciar / solo lectura	boolean	false / true / true
placeholder	Texto del marcador de posición	string	paquete de idioma
format	Formato mostrado (yyyy-MM-dd, yyyy-MM, etc.)	string	'yyyy-MM-dd'
rangeSeparator	Texto del separador en el modo de rango de fechas	string	'~'
cellClassName	Clase personalizada de la celda	(date: Date) => string	—
popperClass	Clase adicional de la capa emergente	string	—
teleportTarget	Destino de montaje de la capa emergente	string \| HTMLElement	'body'
sx	Propiedades de layout abreviadas	—	—

Events

input (v-model), change (value)

Accesibilidad

El disparador es role="combobox" con aria-expanded y el panel, role="grid"; en el modo datetime, la columna de tiempo es role="spinbutton" y fija aria-valuenow/min/max. Al fallar la validación dentro de un LhFormItem, se aplica aria-invalid automáticamente.