Calendar with getter and setter

UI Components for Vue
Post Reply
Secci
Posts: 1
Joined: 24 Nov 2022, 19:08

24 Nov 2022, 19:17

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>

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests