import {Calendar} from 'primeng/primeng';
Calendar is defined with p-calendar element and model binding is done using value property.
<p-calendar [(value)]="dateValue"></p-calendar>
export class MyModel {
dateValue:string;
}
Calendar is displayed in a popup by default, enable inline option for inline display.
<p-calendar [(value)]="dateValue" [inline]="true"></p-calendar>
Default date format is mm/dd/yy, to customize this use dateFormat property. See here for the date format patterns.
<p-calendar [(value)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>
Calendar popup can be displayed with various effects. fadeIn is the default and other available options are slideDown, blind, bounce, clip, drop, fold and slide.
<p-calendar [(value)]="dateValue" showAnim="blind"></p-calendar>
To disable entering dates manually, set readonlyInput to true and to restrict selectable dates use minDate and maxDate options. minDate and maxDate allow values such as a string in dateFormat or values like "+1m +7d".
<p-calendar [(value)]="dateValue" minDate="-1m" maxDate="+1m" [readonlyInput]="true">></p-calendar>
Localization for different languages and formats is done by adding the necessary locale script to your application.
Name | Type | Default | Description |
---|---|---|---|
value | string | null | Value of the component. |
readonlyInput | string | null | When specified, prevents entering the date manually with keyboard. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
placeholder | string | null | Placeholder text for the input. |
inline | boolean | false | When enabled, displays the calendar as inline. Default is false for popup mode. |
showAnim | string | null | Effect to show when displaying the popup. |
dateFormat | string | mm/dd/yy | Format of the date. |
showButtonPanel | boolean | null | Whether to display a button pane underneath the calendar. |
monthNavigator | boolean | false | Whether the month should be rendered as a dropdown instead of text. |
yearNavigator | boolean | false | Whether the year should be rendered as a dropdown instead of text. |
numberOfMonths | number | 1 | The number of months to show at once. |
showWeek | boolean | false | When true, a column is added to show the week of the year. |
showOtherMonths | boolean | false | 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. |
selectOtherMonths | boolean | false | 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. |
defaultDate | string | null | Set the date to highlight on first opening if the field is blank. |
minDate | string | null | The minimum selectable date. |
maxDate | string | null | The Maximum selectable date. |
disabled | boolean | false | When specified, disables the component. |
Name | Parameters | Description |
---|---|---|
onSelect | value: Selected value | Callback to invoke when a date is selected. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-inputtext | Input element |
jQuery UI Datepicker
<h3 class="first">Basic</h3>
<p-calendar [(value)]="date1"></p-calendar> {{date1}}
<h3>DateFormat</h3>
<p-calendar [(value)]="date2" dateFormat="dd.mm.yy"></p-calendar> {{date2}}
<h3>ShowAnim</h3>
<p-calendar [(value)]="date3" showAnim="blind"></p-calendar> {{date3}}
<h3>ButtonPanel</h3>
<p-calendar [(value)]="date4" [showButtonPanel]="true"></p-calendar> {{date4}}
<h3>Navigators</h3>
<p-calendar [(value)]="date5" [monthNavigator]="true" [yearNavigator]="true"></p-calendar> {{date5}}
<h3>Multiple Months</h3>
<p-calendar [(value)]="date6" [numberOfMonths]="3"></p-calendar> {{date16}
<h3>Show Week and Months</h3>
<p-calendar [(value)]="date7" [showWeek]="true" [showOtherMonths]="true" [selectOtherMonths]="true"></p-calendar> {{date7}}
<h3>Restrict</h3>
<p-calendar [(value)]="date8" minDate="-1m" maxDate="+1m" [readonlyInput]="true"></p-calendar> {{date8}}
<h3>Default Date</h3>
<p-calendar [(value)]="date9" defaultDate="+1m +7d"></p-calendar> {{date9}}
<h3>Inline</h3>
<p-calendar [(value)]="date10" [inline]="true"></p-calendar> {{date10}}
export class CalendarDemo {
date1: string;
date2: string;
date3: string;
date4: string;
date5: string;
date6: string;
date7: string;
date8: string;
date9: string;
date10: string;
}