fix browser example

pull/1792/head
Tuğçe Küçükoğlu 2021-11-18 11:47:44 +03:00
parent bd1b2ab1b0
commit 6e925fe617
1 changed files with 17 additions and 17 deletions
src/views/calendar

View File

@ -905,73 +905,73 @@ export default {
<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" autocomplete="off" />
<p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="dateformat">DateFormat</label>
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
<p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" />
<p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
</div>
<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" />
<p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
</div>
<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" />
<p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
</div>
<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" />
<p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
</div>
<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" />
<p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
<p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
<p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
<p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
<p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
<p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
<p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12">
<p-calendar id="datetemplate" v-model="date12">
<template #date="slotProps">
<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>
</p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
<p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
</div>
</div>
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
<p-calendar v-model="date14" :inline="true" :show-week="true"></p-calendar>
</div>
<script type="module">