Documentation for Calendar
cagataycivici
parent
ef782c3046
commit
065c83fcad
|
|
@ -7,6 +7,7 @@
|
|||
<template v-if="!timeOnly">
|
||||
<div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
|
||||
<div class="p-datepicker-header">
|
||||
<slot name="header"></slot>
|
||||
<button class="p-datepicker-prev p-link" v-if="i === 0" @click="navBackward($event)">
|
||||
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
|
||||
</button>
|
||||
|
|
@ -128,6 +129,7 @@
|
|||
<CalendarButton type="button" :label="locale['today']" @click="onTodayButtonClick($event)" class="p-button-secondary" />
|
||||
<CalendarButton type="button" :label="locale['clear']" @click="onClearButtonClick($event)" class="p-button-secondary" />
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</span>
|
||||
|
|
@ -300,7 +302,7 @@ export default {
|
|||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy',
|
||||
weekHeader: 'Sm'
|
||||
weekHeader: 'Wk'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -497,15 +499,17 @@ export default {
|
|||
|
||||
return validMin && validMax && validDate && validDay;
|
||||
},
|
||||
onOverlayEnter() {
|
||||
onOverlayEnter(event) {
|
||||
if (this.autoZIndex) {
|
||||
this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
|
||||
}
|
||||
this.alignOverlay();
|
||||
this.bindOutsideClickListener();
|
||||
this.$emit('show');
|
||||
},
|
||||
onOverlayLeave() {
|
||||
onOverlayLeave(event) {
|
||||
this.unbindOutsideClickListener();
|
||||
this.$emit('hide');
|
||||
},
|
||||
navBackward(event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -893,14 +897,14 @@ export default {
|
|||
};
|
||||
|
||||
this.onDateSelect(dateMeta);
|
||||
this.$emit('click-today', date);
|
||||
this.$emit('today-click', date);
|
||||
this.onTodayClick.emit(event);
|
||||
event.preventDefault();
|
||||
},
|
||||
onClearButtonClick(event) {
|
||||
this.updateModel(null);
|
||||
this.overlayVisible = false;
|
||||
this.$emit('click-clear');
|
||||
this.$emit('clear-click', event);
|
||||
event.preventDefault();
|
||||
},
|
||||
onTimePickerElementMouseDown(event, type, direction) {
|
||||
|
|
|
|||
|
|
@ -3,61 +3,170 @@
|
|||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Button from 'primevue/button';
|
||||
<CodeHighlight lang="js">
|
||||
import Calendar from 'primevue/calendar';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>Button is created using the Button element.</p>
|
||||
<p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<Button />
|
||||
<Calendar v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Label</h3>
|
||||
<p>Text of the button is defined using the <i>label</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" />
|
||||
</CodeHighlight>
|
||||
<h3>Icons</h3>
|
||||
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
||||
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<CodeHighlight lang="js">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Events are defined with the standard notation.</p>
|
||||
<h3>Popup and Inline</h3>
|
||||
<p>Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" @click="handleClick($event)"/>
|
||||
<Calendar v-model="value" :inline="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severity</h3>
|
||||
<p>Different color options are available as severity levels.</p>
|
||||
<h3>Selection Mode</h3>
|
||||
<p>By default calendar allows selecting one date only whereas multiple dates can be selected by setting selectionMode to multiple. In this
|
||||
case calendar updates the value with an array of dates where optionally number of selectable dates can be restricted with maxDateCount property.
|
||||
Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value
|
||||
is the end date.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" selectionMode="single || multiple || range" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>DateFormat</h3>
|
||||
<p>Default date format is mm/dd/yy, to customize this use dateFormat property or define it at locale settings. Note that standalone property overrides the value in locale settings.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" dateFormat="dd.mm.yy" />
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Following options can be a part of the format.</p>
|
||||
<ul>
|
||||
<li>.p-button-secondary</li>
|
||||
<li>.p-button-success</li>
|
||||
<li>.p-button-info</li>
|
||||
<li>.p-button-warning</li>
|
||||
<li>.p-button-danger</li>
|
||||
<li>d - day of month (no leading zero)</li>
|
||||
<li>dd - day of month (two digit)</li>
|
||||
<li>o - day of the year (no leading zeros)</li>
|
||||
<li>oo - day of the year (three digit)</li>
|
||||
<li>D - day name short</li>
|
||||
<li>DD - day name long</li>
|
||||
<li>m - month of year (no leading zero)</li>
|
||||
<li>mm - month of year (two digit)</li>
|
||||
<li>M - month name short</li>
|
||||
<li>MM - month name long</li>
|
||||
<li>y - year (two digit)</li>
|
||||
<li>yy - year (four digit)</li>
|
||||
<li>@ - Unix timestamp (ms since 01/01/1970)</li>
|
||||
<li> ! - Windows ticks (100ns since 01/01/0001)</li>
|
||||
<li>'...' - literal text</li>
|
||||
<li>'' - single quote</li>
|
||||
<li>anything else - literal text</li>
|
||||
</ul>
|
||||
|
||||
<h3>Time</h3>
|
||||
<p>TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option. If you
|
||||
need to use the time picker as standalone, use the timeOnly property.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Calendar v-model="value" :showTime="true" />
|
||||
<Calendar v-model="value" :showTime="true" hourFormat="12" />
|
||||
<Calendar v-model="value" :showTime="true" :timeOnly="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Raised and Rounded Buttons</h3>
|
||||
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
|
||||
<h3>Date Restriction</h3>
|
||||
<p>To disable entering dates manually, set readonlyInput to true and to restrict selectable dates use minDate
|
||||
and maxDate options.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
||||
<Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" />
|
||||
</CodeHighlight>
|
||||
|
||||
<p>To disable specific dates or days, restrict selectable dates use disabledDates and/or disabledDays options.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Button Bar</h3>
|
||||
<p>Button bar displays today and clear buttons and enabled using showButtonBar property.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" :showButtonBar="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Multiple Months</h3>
|
||||
<p>Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" :numberOfMonths="3" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Localization</h3>
|
||||
<p>Localization for different languages and formats is defined by binding the locale settings object to the <i>locale</i> property. Following is the default values for English.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" :locale="en" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
en: {
|
||||
firstDayOfWeek: 0,
|
||||
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
|
||||
monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
|
||||
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy',
|
||||
weekHeader: 'Wk'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Custom Content</h3>
|
||||
<p>Calendar UI accepts custom content using header and footer templates.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value">
|
||||
<template #header>Header Content</template>
|
||||
<template #footer>Footer Content</template>
|
||||
</Calendar>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props
|
||||
passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below
|
||||
changes the background color of dates between 10th and 15th of each month.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Calendar v-model="value">
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Month Picker</h3>
|
||||
<p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Touch UI</h3>
|
||||
<p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
|
||||
<CodeHighlight>
|
||||
<Calendar v-model="value" :touchUI="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>Calendar passes any valid attribute such as name and placeholder to the underlying input text element. Following are the additional properties to configure the calendar.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
|
|
@ -70,29 +179,295 @@ import Button from 'primevue/button';
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>label</td>
|
||||
<td>string</td>
|
||||
<td>value</td>
|
||||
<td>any</td>
|
||||
<td>null</td>
|
||||
<td>Text of the button.</td>
|
||||
<td>Value of the component.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectionMode</td>
|
||||
<td>string</td>
|
||||
<td>single</td>
|
||||
<td>Defines the quantity of the selection, valid values are "single", "multiple" and "range".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>dateFormat</td>
|
||||
<td>string</td>
|
||||
<td>mm/dd/yy</td>
|
||||
<td>Format of the date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inline</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, displays the calendar as inline instead of an overlay.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showOtherMonths</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectOtherMonths</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showIcon</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, displays a button with icon next to input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Name of the icon.</td>
|
||||
<td>pi pi-calendar</td>
|
||||
<td>Icon of the calendar button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>iconPos</td>
|
||||
<td>numberOfMonths</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>Number of months to display.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>view</td>
|
||||
<td>string</td>
|
||||
<td>left</td>
|
||||
<td>Position of the icon, valid values are "left" and "right".</td>
|
||||
<td>date</td>
|
||||
<td>Type of view to display, valid valids are "date" for datepicker and "month" for month picker.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>touchUI</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>monthNavigator</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether the month should be rendered as a dropdown instead of text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>yearNavigator</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether the year should be rendered as a dropdown instead of text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>yearRange</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>panelClass</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Style class of the datetimepicker panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>panelStyle</td>
|
||||
<td>object</td>
|
||||
<td>null</td>
|
||||
<td>Inline style of the datetimepicker panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>minDate</td>
|
||||
<td>Date</td>
|
||||
<td>null</td>
|
||||
<td>The minimum selectable date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxDate</td>
|
||||
<td>Date</td>
|
||||
<td>null</td>
|
||||
<td>The maximum selectable date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabledDates</td>
|
||||
<td>array;</td>
|
||||
<td>null</td>
|
||||
<td>Array with dates to disable.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabledDays</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>Array with disabled weekday numbers.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxDateCount</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Maximum number of selectable dates in multiple mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>appendTo</td>
|
||||
<td>DOM element</td>
|
||||
<td>null</td>
|
||||
<td>DOM element instance where the dialog should be mounted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showOnFocus</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>When disabled, datepicker will not be visible with input focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoZIndex</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether to automatically manage layering.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>baseZIndex</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Base zIndex value to use in layering.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showButtonBar</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to display today and clear buttons at the footer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shortYearCutoff</td>
|
||||
<td>string</td>
|
||||
<td>+10</td>
|
||||
<td>The cutoff year for determining the century for a date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showTime</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to display timepicker.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>timeOnly</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to display timepicker only.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hourFormat</td>
|
||||
<td>string</td>
|
||||
<td>24</td>
|
||||
<td>Specifies 12 or 24 hour format.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>stepHour</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>Hours to change per step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>stepMinute</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>Minutes to change per step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>stepSecond</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>Seconds to change per step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showSeconds</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to show the seconds in time picker.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keepInvalid</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Keep invalid value when input blur.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideOnDateTimeSelect</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to hide the overlay on date selection when showTime is enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>timeSeparator</td>
|
||||
<td>string</td>
|
||||
<td>:</td>
|
||||
<td>Separator of time selector.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showWeek</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, calendar will show week numbers.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Calendar passes any valid event such as focus, blur and input to the underlying input text element. Following are the additional event to configure the calendar.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>select</td>
|
||||
<td>value: Selected value</td>
|
||||
<td>Callback to invoke when a date is selected.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>-</td>
|
||||
<td>Callback to invoke when datepicker panel is shown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>-</td>
|
||||
<td>Callback to invoke when datepicker panel is hidden.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>today-click</td>
|
||||
<td>date: Today as a date instance</td>
|
||||
<td>Callback to invoke when today button is clicked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>clear-click</td>
|
||||
<td>event: Click event</td>
|
||||
<td>Callback to invoke when clear button is clicked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>month-change</td>
|
||||
<td>event.month: New month <br />
|
||||
event.year: New year
|
||||
</td>
|
||||
<td>Callback to invoke when a month is changed using the navigators.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>year-change</td>
|
||||
<td>event.month: New month <br />
|
||||
event.year: New year
|
||||
</td>
|
||||
<td>Callback to invoke when a year is changed using the navigators.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
|
|
@ -103,16 +478,52 @@ import Button from 'primevue/button';
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-button</td>
|
||||
<td>Button element</td>
|
||||
<td>p-calendar</td>
|
||||
<td>Main container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-icon</td>
|
||||
<td>Icon element</td>
|
||||
<td>p-calendar-w-btn</td>
|
||||
<td>Main container element when button is enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-text</td>
|
||||
<td>Label element of the button</td>
|
||||
<td>p-calendar-timeonly</td>
|
||||
<td>Main container element in time picker only mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker</td>
|
||||
<td>Datepicker element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-inline</td>
|
||||
<td>Datepicker element in inline mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-monthpicker</td>
|
||||
<td>Datepicker element in month view.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-monthpicker-month</td>
|
||||
<td>Month cell in month view mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-touch-ui</td>
|
||||
<td>Datepicker element in touch ui mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-calendar</td>
|
||||
<td>Table containing dates of a month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-current-day</td>
|
||||
<td>Cell of selected date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-today</td>
|
||||
<td>Cell of today's date.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -123,62 +534,156 @@ import Button from 'primevue/button';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/calendar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Button</h1>
|
||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||
<h1>Calendar</h1>
|
||||
<p>Calendar is an input component to select a date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
|
||||
<h3>Severities</h3>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
|
||||
<h3>Raised Buttons</h3>
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
|
||||
<h3>Rounded Buttons</h3>
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
<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>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Spanish</h3>
|
||||
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Icon</h3>
|
||||
<Calendar v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Min-Max</h3>
|
||||
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Disable Days</h3>
|
||||
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Navigators</h3>
|
||||
<Calendar 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" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Range</h3>
|
||||
<Calendar v-model="dates2" selectionMode="range" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Button Bar</h3>
|
||||
<Calendar 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>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Time Only / 12h</h3>
|
||||
<Calendar 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>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Multiple Months</h3>
|
||||
<Calendar v-model="date11" :numberOfMonths="3" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Date Template</h3>
|
||||
<Calendar 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>
|
||||
</div>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
button {
|
||||
margin-right: .5em;
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
created() {
|
||||
let today = new Date();
|
||||
let month = today.getMonth();
|
||||
let year = today.getFullYear();
|
||||
let prevMonth = (month === 0) ? 11 : month -1;
|
||||
let prevYear = (prevMonth === 11) ? year - 1 : year;
|
||||
let nextMonth = (month === 11) ? 0 : month + 1;
|
||||
let nextYear = (nextMonth === 0) ? year + 1 : year;
|
||||
this.minDate = new Date();
|
||||
this.minDate.setMonth(prevMonth);
|
||||
this.minDate.setFullYear(prevYear);
|
||||
this.maxDate = new Date();
|
||||
this.maxDate.setMonth(nextMonth);
|
||||
this.maxDate.setFullYear(nextYear);
|
||||
|
||||
let invalidDate = new Date();
|
||||
invalidDate.setDate(today.getDate() - 1);
|
||||
this.invalidDates = [today,invalidDate];
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
date1: null,
|
||||
date2: null,
|
||||
date3: null,
|
||||
date4: null,
|
||||
date5: null,
|
||||
date6: null,
|
||||
date7: null,
|
||||
date8: null,
|
||||
date9: null,
|
||||
date10: null,
|
||||
date11: null,
|
||||
date12: null,
|
||||
date13: null,
|
||||
date14: null,
|
||||
dates1: null,
|
||||
dates2: null,
|
||||
es: {
|
||||
firstDayOfWeek: 1,
|
||||
dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
|
||||
dayNamesShort: [ "Dom","Lun","Mar","Mié","Jue","Vie","Sáb" ],
|
||||
dayNamesMin: [ "D","L","M","X","J","V","S" ],
|
||||
monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
|
||||
monthNamesShort: [ "Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic" ],
|
||||
today: 'Hoy',
|
||||
clear: 'Borrar',
|
||||
weekHeader: 'Sm'
|
||||
},
|
||||
minDate: null,
|
||||
maxDate: null,
|
||||
invalidDates: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'CalendarDoc': CalendarDoc
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue