DatePicker ​

Utilice Date Picker para introducir fechas.

Introducir fecha ​

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

La medida está determinada por el atributo type. Puede habilitar opciones rápidas a través de la propiedad shortcuts. Las fechas desactivadas se ajustan mediante disabledDate, que es una función.

Default
Picker with quick options

Otras mediciones ​

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

Week
Dates
Year
Years
Month
Months

Rango de fechas ​

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

Cuando está en modo rango, los paneles izquierdo y derecho están enlazados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo unlink-panels.

Default
To
With quick options
To

Rango de mes ​

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

Cuando está en modo rango, los paneles izquierdo y derecho están enlazados por defecto. Si desea que los dos paneles cambien los años actuales de forma independiente, puede utilizar el atributo unlink-panels.

Default
To
With quick options
To

Year Range 2.8.0 ​

Picking a year range is supported.

When in range mode, the left and right panels are linked by default. If you want the two panels to switch years independently, you can use the unlink-panels attribute.

Default
To
With quick options
To

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.

date
daterange
-

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

Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：

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.

Por defecto, la parte de la hora de la fecha de inicio y la fecha de fin son para ambos de 00:00:00. Configurar default-time puede cambiar la hora respectivamente. Acepta un array de hasta dos objetos de fecha. La primera cadena establece la hora para la fecha de inicio y la segunda para la fecha de finalización.

Component value：

-

Establecer contenido personalizado del prefijo ​

El contenido del prefijo puede ser personalizado.

Configurando prefix-icon al componente que importas de otro .vue o generado por la función de renderizado.

set prefix-icon

pre

Contenido personalizado ​

The content of cell can be customized, in scoped-slot you can get the cell data. Note that the custom content structure should be consistent with the default structure, otherwise style misalignment may occur.

Custom icon 2.8.0 ​

Custom icons available with slots.

date
date range
-
month range
-
year range
To

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

ts
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 ​

NombreDescripciónTipoDefault
model-value / v-modelvalor enlazado, si es un array, la longitud debe ser de 2number / string / object''
readonlysi DatePicker es solo de lecturabooleanfalse
disabledsi DatePicker está deshabilitadobooleanfalse
sizetamaño del inputenum—
editablesi el input es editablebooleantrue
clearablesi se muestra el botón de borradobooleantrue
placeholderplaceholder en modo no rangostring''
start-placeholderplaceholder para el inicio de fecha en el modo rangostring—
end-placeholderplaceholder para el fin de fecha en el modo rangostring—
typetipo del selectorenumdate
formatformato en que se muestra el valor en el inputstring see date formatsYYYY-MM-DD
popper-classnombre de clase personalizada para el dropdown de DatePickerstring—
popper-optionsOpción de popper personalizada ver más en popper.jsobject{}
range-separatorseparador de rangostring'-'
default-valueopcional, fecha por defecto del calendarioobject—
default-timeopcional, el valor de la hora a usar al seleccionar el rango de fechasobject—
value-formatopcional, formato del valor enlazado. Si no está especificado, el valor enlazado será un objeto Datestring see date formats—
idigual que id en entrada nativastring / object—
nameigual que name en la entrada nativastring / object''
unlink-panelsdesvincula los dos paneles de fecha en el selector de rangobooleanfalse
prefix-iconcustom prefix icon component. By default, if the value of type is TimeLikeType, the value is Clock, else is Calendarstring / object''
clear-iconpersonaliza el componente de icono de limpiezastring / objectCircleClose
validate-eventsi se activa la validación del formulariobooleantrue
disabled-dateuna función que determina si una fecha está desactivada con esa fecha como parámetro. Debe devolver un booleanoFunction—
shortcutsun array de objetos para establecer opciones de acceso directoobject[]
cell-class-nameestablece nombre de clase personalizadoFunction—
teleportedsi el menú desplegable del selector de fecha se teletransporta al bodybooleantrue
empty-values 2.7.0empty values of component, see config-providerarray—
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function—
fallback-placements 2.8.4list of possible positions for Tooltip popper.jsarrary—
placement 2.8.4position of dropdownPlacementbottom

Events ​

NombreDescripciónType
changese dispara cuando el usuario confirma el valorFunction
blurse dispara cuando el input pierde el focoFunction
focusse dispara cuando el input obtiene el focoFunction
clear 2.7.7triggers when the clear icon is clicked in a clearable DatePickerFunction
calendar-changetriggers when the calendar selected date is changed.Function
panel-changese dispara cuando se hace clic en el botón de navegación.Function
visible-changese dispara cuando el desplegable aparece/desapareceFunction

Slots ​

NameDescripción
defaultcustom cell content
range-separatorcustom range separator content
prev-month 2.8.0prev month icon
next-month 2.8.0next month icon
prev-year 2.8.0prev year icon
next-year 2.8.0next year icon

Exposes ​

NombreDescripciónType
focusfocus the DatePicker componentFunction
blur 2.8.7blur the DatePicker componentFunction
handleOpen 2.2.16open the DatePicker popperFunction
handleClose 2.2.16close the DatePicker popperFunction

Type Declarations ​

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

type TimeLikeType = 'datetime' | 'datetimerange'

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

Fuente ​

Componentes • Style • Documentación

Contribuidores ​