vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed date template demo

pull/345/head
cagataycivici 2020-05-13 02:01:44 +03:00
parent d6d5c76379
commit a66e1b7bee
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/calendar/CalendarDemo.vue
View File

@ -66,8 +66,8 @@
<label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12">
<template #date="slotProps">
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
<span v-else>{{slotProps.date.day}}</span>
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
<template v-else>{{slotProps.date.day}}</template>
</template>
</Calendar>
</div>
@ -150,13 +150,6 @@ export default {
<style scoped>
.special-day {
display: flex;
align-items: center;
justify-content: center;
background-color: #1dcbb3;
color: #ffffff;
border-radius: 50%;
width: 2em;
height: 2em;
text-decoration: line-through;
}
</style>

25
src/views/calendar/CalendarDoc.vue
View File

@ -147,11 +147,17 @@ export default {
<template v-pre>
&lt;Calendar v-model="value"&gt;
&lt;template #date="slotProps"&gt;
&lt;div v-if="slotProps.date.day &gt; 10 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
&lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
&lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
&lt;/template&gt;
&lt;/Calendar&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="css">
.special-day {
text-decoration: line-through;
}
</CodeHighlight>
<h3>Month Picker</h3>
@ -602,9 +608,9 @@ export default {
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="datetemplate"&gt;Date Template&lt;/label&gt;
&lt;Calendar id="datetemplate" v-model="date12"&gt;
&lt;template #date="slotProps"&gt;
&lt;div v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
&lt;template #date="slotProps"&gt;
&lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
&lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
&lt;/template&gt;
&lt;/Calendar&gt;
&lt;/div&gt;
@ -673,11 +679,14 @@ export default {
maxDate: null,
invalidDates: null
}
},
components: {
'CalendarDoc': CalendarDoc
}
}
</CodeHighlight>
<CodeHighlight lang="css">
.special-day {
text-decoration: line-through;
}
</CodeHighlight>
</TabPanel>