I try to use a calendar component with getter and setter. I simplified the codesandbox calendar example. With inputtext getters and setters work well. But with calendar not. What is wrong in my approach?
Here the index.html from codesandbox.
Thanks for help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>CalendarDemo</title>
<!-- PrimeVue -->
<link
href="https://unpkg.com/primevue@^3/resources ... /theme.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/primevue@^3/resources ... ue.min.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/primeflex@^3/primeflex.min.css"
rel="stylesheet"
/>
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core ... "></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue@^3/calendar/ ... "></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<h5>Popup</h5>
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-4">
<label for="text">Basic</label>
<p-inputtext
input-id="text"
:value="getMyDate()"
@change="setMyDate($event)"
></p-calendar>
</div>
<div class="field col-12 md:col-4">
<label for="basic">Basic</label>
<p-calendar
input-id="basic"
:value="getMyDate()"
@date-select="setMyDate($event)"
autocomplete="off"
date-format="dd.mm.yy"
></p-calendar>
</div>
</div>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const date1 = ref(new Date());
return {
date1,
};
},
methods: {
getMyDate() {
return this.date1;
},
setMyDate(event) {
this.date1 = event;
}
},
components: {
"p-calendar": primevue.calendar
, "p-inputtext": primevue.inputtext
}
};
createApp(App).use(primevue.config.default).mount("#app");
</script>
<style>
.special-day {
text-decoration: line-through;
}
</style>
</body>
</html>
Calendar with getter and setter
Hi,
found the error myself.
Wanted to inform others that might be interested.
Using vue in browser mode the vue attributes modelValue and @update:modelValue have to be written model-value and @update:model-value
so
<p-calendar model-value="getMyDate()" @update:model-value="setMyDate($event)"/>
works as expected.
found the error myself.
Wanted to inform others that might be interested.
Using vue in browser mode the vue attributes modelValue and @update:modelValue have to be written model-value and @update:model-value
so
<p-calendar model-value="getMyDate()" @update:model-value="setMyDate($event)"/>
works as expected.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests