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

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

@ -147,11 +147,17 @@ export default {
<template v-pre> <template v-pre>
&lt;Calendar v-model="value"&gt; &lt;Calendar v-model="value"&gt;
&lt;template #date="slotProps"&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;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt; &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Calendar&gt; &lt;/Calendar&gt;
</template> </template>
</CodeHighlight>
<CodeHighlight lang="css">
.special-day {
text-decoration: line-through;
}
</CodeHighlight> </CodeHighlight>
<h3>Month Picker</h3> <h3>Month Picker</h3>
@ -603,8 +609,8 @@ export default {
&lt;label for="datetemplate"&gt;Date Template&lt;/label&gt; &lt;label for="datetemplate"&gt;Date Template&lt;/label&gt;
&lt;Calendar id="datetemplate" v-model="date12"&gt; &lt;Calendar id="datetemplate" v-model="date12"&gt;
&lt;template #date="slotProps"&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;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt; &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Calendar&gt; &lt;/Calendar&gt;
&lt;/div&gt; &lt;/div&gt;
@ -673,11 +679,14 @@ export default {
maxDate: null, maxDate: null,
invalidDates: null invalidDates: null
} }
},
components: {
'CalendarDoc': CalendarDoc
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
.special-day {
text-decoration: line-through;
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>