fix browser example
parent
bd1b2ab1b0
commit
6e925fe617
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue