DatePicker

Utilice Date Picker para introducir fechas.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Introducir fecha

Selector de fecha básico medido por 'día'.

Otras mediciones

Puede elegir una semana, un mes, un año o varias fechas ampliando el componente de selector de fechas estándar.

Rango de fechas

Se admite la selección de un rango de fechas.

Rango de mes

Se admite la selección de un periodo de meses.

Valor por defecto

Si el usuario no ha elegido una fecha, muestra el calendario de hoy por defecto. Puede utilizar default-value para fijar otra fecha. Su valor debe ser analizable por new Date().

Si el tipo es daterange, default-value establece el valor para el calendario del lado izquierdo.

Formatos de Fecha

Utilice format para controlar el formato del texto visualizado en el input. Utilice value-format para controlar el formato del valor vinculado.

Por defecto, el componente acepta y emite un objeto Date.

Revise la lista aquí de todos los formatos disponibles de Day.js.

WARNING

Preste atención a la capitalización

Hora por defecto para comienzo y fin de fecha

Al seleccionar un rango de fechas, puede asignar la parte de la hora para la fecha de inicio y la fecha de finalización.

Establecer contenido personalizado del prefijo

El contenido del prefijo puede ser personalizado.

Contenido personalizado

El contenido de la celda se puede personalizar, en el ámbito del slot se pueden obtener los datos de la celda.

Para detalles de datos, por favor refiérase a:

interface DateCell {
  column: number
  customClass: string
  disabled: boolean
  end: boolean
  inRange: boolean
  row: number
  selected: Dayjs
  isCurrent: boolean
  isSelected: boolean
  start: boolean
  text: number
  timestamp: number
  date: Date
  dayjs: Dayjs
  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

Localización

El idioma predeterminado es el inglés, si necesita utilizar otros idiomas, por favor revise Internacionalización

Nota, el locale de la fecha y hora (nombre del mes, primer día de la semana ...) también están configurados en la localización.

API

Attributes

Nombre	Descripción	Tipo	Default
model-value / v-model	valor enlazado, si es un array, la longitud debe ser de 2	`number` / `string` / `object`	''
readonly	si DatePicker es solo de lectura	`boolean`	false
disabled	si DatePicker está deshabilitado	`boolean`	false
size	tamaño del input	`enum`	—
editable	si el input es editable	`boolean`	true
clearable	si se muestra el botón de borrado	`boolean`	true
placeholder	placeholder en modo no rango	`string`	''
start-placeholder	placeholder para el inicio de fecha en el modo rango	`string`	—
end-placeholder	placeholder para el fin de fecha en el modo rango	`string`	—
type	tipo del selector	`enum`	date
format	formato en que se muestra el valor en el input	`string` see date formats	YYYY-MM-DD
popper-class	nombre de clase personalizada para el dropdown de DatePicker	`string`	—
popper-options	Opción de popper personalizada ver más en popper.js	`object`	{}
range-separator	separador de rango	`string`	'-'
default-value	opcional, fecha por defecto del calendario	`object`	—
default-time	opcional, el valor de la hora a usar al seleccionar el rango de fechas	`object`	—
value-format	opcional, formato del valor enlazado. Si no está especificado, el valor enlazado será un objeto Date	`string` see date formats	—
id	igual que `id` en entrada nativa	`string` / `object`	—
name	igual que `name` en la entrada nativa	`string` / `object`	''
unlink-panels	desvincula los dos paneles de fecha en el selector de rango	`boolean`	false
prefix-icon	custom prefix icon component. By default, if the value of `type` is `TimeLikeType`, the value is `Clock`, else is `Calendar`	`string` / `object`	''
clear-icon	personaliza el componente de icono de limpieza	`string` / `object`	`CircleClose`
validate-event	si se activa la validación del formulario	`boolean`	true
disabled-date	una función que determina si una fecha está desactivada con esa fecha como parámetro. Debe devolver un booleano	`Function`	—
shortcuts	un array de objetos para establecer opciones de acceso directo	`object`	[]
cell-class-name	establece nombre de clase personalizado	`Function`	—
teleported	si el menú desplegable del selector de fecha se teletransporta al body	`boolean`	true
empty-values 2.7.0	empty values of component, see config-provider	`array`	—
value-on-clear 2.7.0	clear return value, see config-provider	`string` / `number` / `boolean` / `Function`	—

Events

Nombre	Descripción	Type
change	se dispara cuando el usuario confirma el valor	`Function`
blur	se dispara cuando el input pierde el foco	`Function`
focus	se dispara cuando el input obtiene el foco	`Function`
calendar-change	triggers when the calendar selected date is changed.	`Function`
panel-change	se dispara cuando se hace clic en el botón de navegación.	`Function`
visible-change	se dispara cuando el desplegable aparece/desaparece	`Function`

Slots

Name	Descripción
default	custom cell content
range-separator	custom range separator content

Exposes

Nombre	Descripción	Type
focus	focus the Input component	`Function`
handleOpen 2.2.16	open the DatePicker popper	`Function`
handleClose 2.2.16	close the DatePicker popper	`Function`

Type Declarations

Show declarations

import type { Options as PopperOptions } from '@popperjs/core'

type TimeLikeType = 'datetime' | 'datetimerange'

Fuente

Componentes • Documentación

Contribuidores

Color Picker

DateTime Picker

DatePicker #

Introducir fecha #

Otras mediciones #

Rango de fechas #

Rango de mes #

Valor por defecto #

Formatos de Fecha #

Hora por defecto para comienzo y fin de fecha #

Establecer contenido personalizado del prefijo #

Contenido personalizado #

Localización #

API #

Attributes #

Events #

Slots #

Exposes #

Type Declarations #

Fuente #

Contribuidores #