Calendar
Muestra fechas.
Básico
Configure value para especificar el mes que se muestra actualmente. Si no se especifica value, se muestra el mes actual. value soporta enlace bidireccional.
Controller Type 2.13.1
You can set the type of the controller for Calendar header. When setting select, you can use formatter to customize label.
Contenido personalizado
Personalice lo que se muestra en la celda del calendario configurando el scoped-slot que se llama dateCell. En el scoped-slot puede obtener la fecha (la fecha de la celda actual), datos (incluyendo el tipo, Si está seleccionado (isSelected), atributo de día). Para obtener más información, consulte la documentación de la API a continuación.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
08-30 | 08-31 | 09-01 | 09-02 | 09-03 | 09-04 | 09-05 |
09-06 | 09-07 | 09-08 | 09-09 | 09-10 | 09-11 | 09-12 |
09-13 | 09-14 | 09-15 | 09-16 | 09-17 | 09-18 | 09-19 |
09-20 | 09-21 | 09-22 | 09-23 | 09-24 | 09-25 | 09-26 |
09-27 | 09-28 | 09-29 | 09-30 | 10-01 | 10-02 | 10-03 |
Rango
Defina el atributo range para especificar un rango de fechas a visualizar en el calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.
Cabecera personalizada
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 1 | 2 | 3 |
Idiomas
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
Atributos
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| model-value / v-model | valor enlazado | Date | — |
| range | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. El tiempo de inicio debe ser el día de inicio de la semana, el tiempo de finalización debe ser el día de finalización de la semana y el período no puede exceder los dos meses. | array | — |
| controller-type 2.13.1 | type of the controller for Calendar header | enum | button |
| formatter 2.13.1 | format label when controller-type is 'select' | Function | — |
Slots
| Nombre | Descripción | Tipo |
|---|---|---|
| date-cell | type indica el mes al que pertenece la fecha, los valores opcionales son prev-month, current-month, next-month; isSelected indica si la fecha está seleccionada; day es la fecha formateada en el formato YYYY-MM-DD; date es el objeto Date que la celda representa | object |
| header | contenido de la cabecera del calendario | object |
Exposes
| Name | Description | Type |
|---|---|---|
| selectedDay | currently selected date | object |
| pickDay | select a specific date | Function |
| selectDate | select date | Function |
| calculateValidatedDateRange | Calculate the validate date range according to the start and end dates | Function |
Type Declarations
Show declarations
type CalendarDateType =
'prev-month' | 'next-month' | 'prev-year' | 'next-year' | 'today'Fuente
Componentes • Style • Documentación
Contribuidores
