mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
141 lines
5.2 KiB
Markdown
141 lines
5.2 KiB
Markdown
## Calendrier
|
|
|
|
Affiche un calendrier.
|
|
|
|
### Usage basique
|
|
|
|
:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas spécifiée, le mois actuel sera affiché. `value` supporte le two-way binding.
|
|
|
|
```html
|
|
<el-calendar v-model="value"> </el-calendar>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: new Date(),
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const value = ref(new Date());
|
|
|
|
return {
|
|
value,
|
|
};
|
|
},
|
|
});
|
|
|
|
</setup>
|
|
-->
|
|
```
|
|
|
|
:::
|
|
|
|
### Contenu personnalisé
|
|
|
|
:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.
|
|
|
|
```html
|
|
<el-calendar>
|
|
<template #dateCell="{data}">
|
|
<p :class="data.isSelected ? 'is-selected' : ''">
|
|
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' :
|
|
'' }}
|
|
</p>
|
|
</template>
|
|
</el-calendar>
|
|
<style>
|
|
.is-selected {
|
|
color: #1989fa;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
:::
|
|
|
|
### Intervalle
|
|
|
|
:::demo Utilisez l'attribut `range` pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.
|
|
|
|
```html
|
|
<el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]">
|
|
</el-calendar>
|
|
```
|
|
|
|
:::
|
|
|
|
### Tête personnalisée
|
|
|
|
:::demo Intervalle en définissant le nom `header` de `scoped-slot` Personnalisez le contenu affiché dans l'en-tête du calendrier. exister `scoped-slot` Vous pouvez obtenir la date (la date de la cellule actuelle). Pour plus de détails, veuillez vous référer à la documentation de l'API ci-dessous.
|
|
|
|
```html
|
|
<el-calendar ref="calendar">
|
|
<template #header="{date}">
|
|
<span>Contenu d'en-tête personnalisé</span>
|
|
<span>{{ date }}</span>
|
|
<el-button-group>
|
|
<el-button size="mini" @click="selectDate('prev-year')"
|
|
>l'année dernière</el-button
|
|
>
|
|
<el-button size="mini" @click="selectDate('prev-month')"
|
|
>le mois dernier</el-button
|
|
>
|
|
<el-button size="mini" @click="selectDate('today')"
|
|
>De nos jours</el-button
|
|
>
|
|
<el-button size="mini" @click="selectDate('next-month')"
|
|
>le mois prochain</el-button
|
|
>
|
|
<el-button size="mini" @click="selectDate('next-year')"
|
|
>L'année prochaine</el-button
|
|
>
|
|
</el-button-group>
|
|
</template>
|
|
</el-calendar>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
selectDate(value) {
|
|
this.$refs.calendar.selectDate(value)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
```
|
|
|
|
:::
|
|
|
|
### Localization
|
|
|
|
The default locale of is English, if you need to use other languages, please check [Internationalization](#/fr-FR/component/i18n)
|
|
|
|
Note, date time locale (month name, first day of the week ...) are also configed in localization.
|
|
|
|
### Attributs
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------- | ------ |
|
|
| model-value / v-model | Valeur liée. | Date | — | — |
|
|
| range | Intervalle de dates, début et fin inclus. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | [Date]Array | — | — |
|
|
|
|
### Slot dateCell
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | ----------------- | ------ |
|
|
| data | { type, isSelected, day, date }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en YYYY-MM-DD; `date` est la date de la cellule courante. | Object | — | — |
|
|
|
|
### Methods
|
|
|
|
| Event Name | Description | Attribute |
|
|
| ---------- | --------------- | ------------------------------------------------------- |
|
|
| selectDate | Changer de date | today / prev-month / next-month / prev-year / next-year |
|