Forum : Impossible de récupérer une valeur props

Bonsoir à tous

Je souhaite utiliser la librairie @vuepic/vue-datepicker et je souhaite lui donné, lors de l'appel du component, dans mon code php, une date par défaut si elle a été défini (lors d'une modification) et vide, si pas encore défini.

Ci dessous, mon appel du component:

<Datepicker v-model="date" lang="fr" name="event_date" locale="fr" :format="dateFormat" :defaultvalue="new Date('<?php echo $event->event_date; ?>').toISOString().toLocaleString('fr-FR', { timeZone: 'UTC' }) || ''" ></Datepicker>

Et mon fichier js qui injecte mon component vuejs:

import {createApp, ref } from 'vue'; ... import Datepicker from '@vuepic/vue-datepicker'; ... import '@vuepic/vue-datepicker/dist/main.css'; ... const app = createApp({ components: { Datepicker }, props: { defaultvalue: { type: String, required: true }, }, setup(props) { console.log(props.defaultvalue); const date = ref(props.defaultvalue); /** * Formats the given date to a specific format. * @param {Date} date - The date to be formatted. * @returns {string} - The formatted date string. */ const dateFormat = (date) => { const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }; return new Intl.DateTimeFormat('fr-FR', options).format(date); }; return { dateFormat, date, }; }, }); app.mount('#body');

Ce que je veux

Je souhaiterais que, lorsque defaultvalue contient une date, que la date soit affiché par défaut.µ

Ce que j'obtiens

Dans le cas où une date est défini ou pas, j'obtiens un undefined!
Par contre, dans le cas où l'utilisateur selectionne une date via le datepicker que j'utilise, il y a bel et bien la date sélectionné avec le format que je souhaite.
Cela fait plusieurs jours que je cherche, si quelqu'un voit mon erreur, car je pense que cela vient de moi, je suis preneur!

Bonjour

Après plusieurs jours de recherche, j'ai trouvé comment faire.
J'ai donc créer mon propre component.

<template> <Datepicker v-model="date" :format="dateFormat" :lang="lang" :name="name" :locale="locale" :defaultvalue="defaultvalue" /> </template> <script> import { ref } from 'vue'; import Datepicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; import { fr } from 'date-fns/locale'; export default { components: { Datepicker }, props: { defaultvalue: { type: String, required: true }, date: { type: String, required: true }, lang: { type: String, required: true }, locale: { type: String, required: true }, name: { type: String, required: true } }, setup(props) { const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }; let defaultvalue = ''; if(props.defaultvalue != '') { defaultvalue = new Date(props.defaultvalue); } const date = ref(defaultvalue); const dateFormat = (date) => { return new Intl.DateTimeFormat('fr-FR', options).format(date); }; return { dateFormat, date, }; }, }; </script>

De cette manière, je peux injecter une valeur par défaut.

Bonne journée.

Impossible de récupérer une valeur props

1 réponse