Selector de fecha

LhDatePicker es un componente selector de fecha y hora que admite varios modos de selección: fecha, mes, año, etc.

Uso básico

Uso básico

2024-01-01

<script setup lang="ts">
import { ref } from 'vue'

const baseDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

<script>
export default {
  data() {
    return {
      baseDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

Estado deshabilitado

Estado deshabilitado

2024-01-01

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

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

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

Formato de fecha

Formato de fecha

10/16/2026

<script setup lang="ts">
import { ref } from 'vue'

const formatDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

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

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

Botón de borrado

Botón de borrado

2026-10-16

<script setup lang="ts">
import { ref } from 'vue'

const clearDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

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

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

Tamaño

Tamaño

2026-10-16

2026-10-16

2026-10-16

<script setup lang="ts">
import { ref } from 'vue'

const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

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

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

Modos de selección

mode admite 'date' (predeterminado) / 'month' / 'year'. Dentro del panel, al hacer clic en el título se desciende nivel a nivel: fecha → mes → año; en los modos mes/año, el panel se abre directamente en la cuadrícula correspondiente y al hacer clic se selecciona y se cierra (sin botones inferiores).

Modos mes y año

2026A 10M

2024A

<script setup lang="ts">
import { ref } from 'vue'

const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

<script>
export default {
  data() {
    return {
      monthDate: new Date(),
      yearDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

Marcador de posición, solo lectura y personalización

placeholder personaliza el texto del marcador de posición; readonly lo muestra en modo solo lectura (el panel se puede ver, pero no seleccionar); range-separator personaliza el separador del intervalo; cell-class-name añade clases personalizadas a las celdas de fecha; popper-class personaliza el estilo del panel.

placeholder / readonly / range-separator

2026-10-16

<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>

<template>
  <!-- Texto del marcador de posición -->
  <LhDatePicker v-model="dp1" placeholder="Selecciona la fecha de entrada" />
  <!-- Solo lectura -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

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

<template>
  <!-- Texto del marcador de posición -->
  <LhDatePicker v-model="dp1" placeholder="Selecciona la fecha de entrada" />
  <!-- Solo lectura -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

DatePicker API

Nota: datetime y la selección por intervalos actualmente solo tienen el tipo reservado, sin la interfaz de selección correspondiente (las columnas de hora y el panel de intervalo no están implementados; véase el registro familiar P-08). Si se pasa externalmente un valor de intervalo [Date, Date], el panel puede mostrarlo, pero la confirmación dentro del panel no sobrescribirá el valor de intervalo.

Prop	Descripción	Tipo	Predeterminado
modelValue	Fecha vinculada	Date | [Date, Date]	null
mode	Modo de selección	"date" | "month" | "year" | "datetime"	'date'
size	Tamaño	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	Si se deshabilita	boolean	false
clearable	Si se muestra el botón de borrado	boolean	true
placeholder	Texto del marcador de posición (si no se pasa, se genera a partir de format; toma el paquete de idioma datepicker.year/month)	string	''
format	Formato de fecha	string	'yyyy-MM-dd'
readonly	Campo de entrada de solo lectura	boolean	true
rangeSeparator	Separador de intervalo	string	'~'
cellClassName	—	(date: Date) => string	—
popperClass	—	string	—
sx	Props de disposición rápida (p. ej., { mt: 2, w: '50%' }); se convierten en estilos en línea aplicados al elemento raíz del disparador (el panel flotante no se ve afectado)	LhSxProps	—

DatePicker Events

Evento	Descripción	Tipo
update:model-value	Se dispara cuando cambia el valor	(value: Date | [Date, Date]) => void
change	Se dispara cuando se confirma el cambio de valor	(value: Date | [Date, Date]) => void

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/date-picker/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):

LhDatePickerProps

export interface LhDatePickerProps {
  modelValue?: Date | [Date, Date] | null
  mode?: LhDatePickerMode
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  rangeSeparator?: string
  cellClassName?: (date: Date) => string
  popperClass?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhDatePickerMode _{(de @lh-ui/share/core/date-picker)}

/**
 * Modos de DatePicker
 */
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

LhComponentSize _{(de @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]