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

Updated calendar demo

pull/345/head
cagataycivici 2020-05-12 18:41:17 +03:00
parent c5bf7bf0c0
commit 699a48f502
2 changed files with 96 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,72 +7,73 @@
</div>
</div>
<div class="content-section implementation" style="padding-top:0">
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<h3>Basic</h3>
<Calendar v-model="date1" />
<div class="content-section implementation">
<h3>Popup</h3>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
</div>
<div class="p-col-12 p-md-4">
<h3>Spanish</h3>
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
<div class="p-field p-col-12 p-md-4">
<label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" />
</div>
<div class="p-col-12 p-md-4">
<h3>Icon</h3>
<Calendar v-model="date3" :showIcon="true" />
<div class="p-field p-col-12 p-md-4">
<label for="spanish">Spanish</label>
<Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
</div>
<div class="p-col-12 p-md-4">
<h3>Min-Max</h3>
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
<div class="p-field p-col-12 p-md-4">
<label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
<div class="p-col-12 p-md-4">
<h3>Disable Days</h3>
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
<div class="p-field p-col-12 p-md-4">
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-col-12 p-md-4">
<h3>Navigators</h3>
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-col-12 p-md-4">
<h3>Multiple</h3>
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div>
<div class="p-col-12 p-md-4">
<h3>Range</h3>
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
<div class="p-field p-col-12 p-md-4">
<label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div>
<div class="p-col-12 p-md-4">
<h3>Button Bar</h3>
<Calendar v-model="date7" :showButtonBar="true" />
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
</div>
<div class="p-col-12 p-md-4">
<h3>Time / 24h</h3>
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
</div>
<div class="p-col-12 p-md-4">
<h3>Time Only / 12h</h3>
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-col-12 p-md-4">
<h3>Month/Year Picker</h3>
<Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-col-12 p-md-4">
<h3>Multiple Months</h3>
<Calendar v-model="date11" :numberOfMonths="3" />
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
</div>
<div class="p-col-12 p-md-4">
<h3>Date Template</h3>
<Calendar v-model="date12">
<div class="p-field p-col-12 p-md-4">
<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>
</template>
</Calendar>
</div>
<div class="p-col-12 p-md-4">
<h3>Touch UI</h3>
<Calendar v-model="date13" :touchUI="true" />
<div class="p-field p-col-12 p-md-4">
<label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div>
</div>

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

@ -545,71 +545,72 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Calendar v-model="date1" /&gt;
&lt;h3&gt;Popup&lt;/h3&gt;
&lt;div class=" p-fluid p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="basic"&gt;Basic&lt;/label&gt;
&lt;Calendar id="basic" v-model="date1" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Spanish&lt;/h3&gt;
&lt;Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="icon"&gt;Icon&lt;/label&gt;
&lt;Calendar id="icon" v-model="date3" :showIcon="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Icon&lt;/h3&gt;
&lt;Calendar v-model="date3" :showIcon="true" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="spanish"&gt;Spanish&lt;/label&gt;
&lt;Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Min-Max&lt;/h3&gt;
&lt;Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="minmax"&gt;MinMax&lt;/label&gt;
&lt;Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Disable Days&lt;/h3&gt;
&lt;Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="disableddays"&gt;Disabled Days&lt;/label&gt;
&lt;Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Navigators&lt;/h3&gt;
&lt;Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="navigators"&gt;Navigators&lt;/label&gt;
&lt;Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="multiple"&gt;Multiple&lt;/label&gt;
&lt;Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Range&lt;/h3&gt;
&lt;Calendar v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="range"&gt;Range&lt;/label&gt;
&lt;Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Button Bar&lt;/h3&gt;
&lt;Calendar v-model="date7" :showButtonBar="true" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="buttonbar"&gt;Button Bar&lt;/label&gt;
&lt;Calendar id="buttonbar" v-model="date7" :showButtonBar="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time / 24h&lt;/h3&gt;
&lt;Calendar v-model="date8" :showTime="true" :showSeconds="true" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="time24"&gt;Time / 24h&lt;/label&gt;
&lt;Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time Only / 12h&lt;/h3&gt;
&lt;Calendar v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="time12"&gt;Time / 12h&lt;/label&gt;
&lt;Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Month/Year Picker&lt;/h3&gt;
&lt;Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="monthpicker"&gt;Month Picker&lt;/label&gt;
&lt;Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple Months&lt;/h3&gt;
&lt;Calendar v-model="date11" :numberOfMonths="3" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="multiplemonths"&gt;Multiple Months&lt;/label&gt;
&lt;Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Date Template&lt;/h3&gt;
&lt;Calendar v-model="date12"&gt;
&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 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&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&gt;
&lt;/Calendar&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Touch UI&lt;/h3&gt;
&lt;Calendar v-model="date13" :touchUI="true" /&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="touchUI"&gt;TouchUI&lt;/label&gt;
&lt;Calendar id="touchUI" v-model="date13" :touchUI="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;