element-plus/website/docs/fr-FR/calendar.md
zazzaz c17332f3a9
doc: Set Day.js locale (#1096)
* chore: update time picker doc

* chore: update

* chore: update

* chore: update
2020-12-23 16:38:06 +08:00

2.6 KiB

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.

<el-calendar v-model="value">
</el-calendar>

<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>

:::

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.

<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.

<el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]">
</el-calendar>

:::

Localization

The default locale of is English, if you need to use other languages, please check Internationalization

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