DateTimePicker
Seleccionar fecha y hora juntos en un picker.
TIP
DateTimePicker es derivado de DatePicker y TimePicker. Para una explicación más detallada sobre los atributos, puede referirse a DatePicker y TimePicker.
TIP
Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).
Fecha y hora
Formato de fecha y hora
Utilice format para controlar el formato del texto visualizado en el input. Utilice value-format para controlar el formato del valor enlazado.
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
Date and time formats in dropdown panel
Use date-format and time-format to control displayed text's format in the dropdown panel's input box.
Date and time range
Default time value for start date and end date
Attributes
| Nombre | Descripción | Tipo | Valores Aceptados | Por defecto |
|---|---|---|---|---|
| model-value / v-model | valor enlazado, si es un array, la longitud debe ser de 2 | Date / number / string / Array | — | — |
| readonly | si DateTimePicker es solo de lectura | boolean | — | false |
| disabled | si DateTimePicker está deshabilitado | boolean | — | false |
| editable | si el input puede ser editado | boolean | — | true |
| clearable | si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | large/default/small | default |
| 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 | — | — |
| arrow-control | si se puede modificar la hora utilizando botones con flechas | boolean | — | false |
| type | tipo del selector | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | formato de valor mostrado en el input | string | ver formatos de fecha | YYYY-MM-DD HH:mm:ss |
| popper-class | nombre de clase personalizado para el Dropdown de DatePicker | string | — | — |
| range-separator | separador de rango | string | — | '-' |
| default-value | opcional, fecha predeterminada del calendario | Date / [Date, Date] | — | |
| default-time | el valor por defecto de la hora después de elegir una fecha. La hora 00:00:00 se utilizará si no se especifica | Date / [Date, Date] | — | — |
| value-format | opcional, formato del valor enlazado. Si no está especificado, el valor enlazado será un objeto Date | string | ver formatos de fecha | — |
| date-format 2.4.0 | optional, format of the date displayed value in TimePicker's dropdown | string | see date formats | — |
| time-format 2.4.0 | optional, format of the time displayed value in TimePicker's dropdown | string | see date formats | — |
| id | same as id in native input | string / [string, string] | — | — |
| name | same as name in native input | string | — | — |
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon component | string | Component | — | Date |
| clear-icon | Custom clear icon component | string | Component | — | CircleClose |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function(Date) | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether datetime-picker dropdown is teleported to the body | boolean | true / false | 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 | Parámetros |
|---|---|---|
| change | se dispara cuando el usuario confirma el valor | valor vinculado del componente |
| blur | se dispara cuando el input pierde el foco | (e: FocusEvent) |
| focus | se dispara cuando el input obtiene el foco | (e: FocusEvent) |
| calendar-change | se dispara cuando se cambia la fecha seleccionada. Solamente para datetimerange | [Date, Date] |
| visible-change | se dispara cuando el desplegable aparece/desaparece | true cuando aparece, y false de otro modo |
Methods
| Método | Descripción | Parámetros |
|---|---|---|
| focus | coloca el foco en el elemento actual | — |
Slots
| Nombre | Descripción |
|---|---|
| default | contenido personalizado de la celda |
| range-separator | separador de los rangos personalizado |