Bonjour, j'ai un problème je me suis pas mal creusé la tête j'ai pas mal cherché sans suite... EN fait mon code semble correct mais je ne sais pourquoi je n'arrive pas à afficher le calendrier... Voici un aperçu...

Bonjour, en septembre 2022 je vous disais comment insérer un code sur le forum à l'aide du bouton code </> de la barre d'outil. 

Dans  la suite de vos sujet, je vois que vous savez le faire. Pour quelles raisons vous n'avez pas mit en forme votre code?

La modération

désolé...

<template>
    <v-container class="leconteneur">
      <v-row>
        <v-col cols="12" md="6" class="mx-auto">
          <v-menu
            v-model="showDatePicker"
            :close-on-content-click="false"
            transition="scale-transition"
            min-width="auto"
            offset-y
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model="selectedDate"
                v-bind="attrs"
                v-on="on"
                outlined
                prepend-icon="mdi-calendar"
                readonly
                label="Select Date"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="selectedDate"
              @input="showDatePicker = false"
            ></v-date-picker>
          </v-menu>
        </v-col>
        <v-col cols="12" md="6" class="mx-auto">
          <v-text-field
            v-model="nouvelleTache"
            label="Ajouter une tâche"
            append-icon="mdi-plus"
            @click:append="ajouterTache"
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="6" class="mx-auto">
          <v-card
            v-for="(tache, indice) in taches"
            :key="indice"
            class="mb-4"
          >
            <v-card-title>
              {{ tache }}
              <v-spacer></v-spacer>
              <v-btn icon @click="supprimerTache(indice)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </template>
  <script setup>
  import { ref } from 'vue';
  const getLocalDateString = () => {
    const date = new Date();
    date.setMinutes(date.getMinutes() - date.getTimezoneOffset()); // Adjust for local timezone
    return date.toISOString().substring(0, 10);
  };
  const nouvelleTache = ref('');
  const taches = ref([]);
  const selectedDate = ref(getLocalDateString());
  const showDatePicker = ref(false);
  const ajouterTache = () => {
    if (nouvelleTache.value.trim() !== '') {
      taches.value.push(nouvelleTache.value);
      nouvelleTache.value = '';
    }
  };
  const supprimerTache = (indice) => {
    taches.value.splice(indice, 1);
  };
  </script>
  <style scoped>
  .leconteneur {
    position: relative;
    top: 110px;
    z-index: 9999;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  </style>