import {CalendarModule} from 'primeng/primeng';
Two-way value binding is defined using the standard ngModel directive referencing to a Date property.
<p-calendar [(ngModel)]="value"></p-calendar>
export class MyModel {
value: Date;
}
Calendar can be used in a model driven form as well.
<p-calendar formControlName="date"></p-calendar>
Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.
<p-calendar [(ngModel)]="value" [inline]="true"></p-calendar>
Default date format is mm/dd/yy, to customize this use dateFormat property.
<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>
Following options can be a part of the format.
TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option.
<p-calendar [(ngModel)]="value" showTime="showTime" hourFormat="12"></p-calendar>
<p-calendar [(ngModel)]="value" showTime="showTime" hourFormat="24"></p-calendar>
To disable entering dates manually, set readonlyInput to true and to restrict selectable dates use minDate and maxDate options..
<p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="+maxDateValue" readonlyInput="readonlyInput">></p-calendar>
Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.
<p-calendar [(ngModel)]="dateValue" [locale]="en"></p-calendar>
export class MyModel {
en: any;
ngOnInit() {
this.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" ]
};
}
}
Name | Type | Default | Description |
---|---|---|---|
defaultDate | string | null | Set the date to highlight on first opening if the field is blank. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
inputStyle | string | null | Inline style of the input field. |
inputStyleClass | string | null | Style class of the input field. |
placeholder | string | null | Placeholder text for the input. |
disabled | boolean | false | When specified, disables the component. |
dateFormat | string | mm/dd/yy | Format of the date. |
inline | boolean | false | When enabled, displays the calendar as inline. Default is false for popup mode. |
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. |
showIcon | boolean | false | When enabled, displays a button with icon next to input. |
icon | string | fa-calendar | Icon of the calendar button. |
appendTo | any | null | Target element to attach the overlay, valid values are "body" or a local template variable of another element. |
readonlyInput | string | null | When specified, prevents entering the date manually with keyboard. |
shortYearCuto | string | +10 | The cutoff year for determining the century for a date. |
minDate | string | null | The minimum selectable date. |
maxDate | string | null | The Maximum selectable date. |
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. |
yearRange | string | fa-calendar | The range of years displayed in the year drop-down: either relative to today's year ("-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). |
showTime | boolean | false | Whether to display timepicker. |
hourFormat | string | 24 | Specifies 12 or 24 hour format. |
locale | object | null | An object having regional configuration properties for the calendar. |
Name | Parameters | Description |
---|---|---|
onSelect | value: Selected value | Callback to invoke when a date is selected. |
onBlur | event: Blur event | Callback to invoke on blur of input field. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-calendar | Wrapper of input element |
ui-inputtext | Input element |
None.
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<h3>Basic</h3>
<p-calendar [(ngModel)]="date1"></p-calendar> {{date1|date}}
</div>
<div class="ui-g-12 ui-md-4">
<h3>Spanish</h3>
<p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"></p-calendar> {{date2|date}}
</div>
<div class="ui-g-12 ui-md-4">
<h3>Icon</h3>
<p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>
</div>
<div class="ui-g-12 ui-md-4">
<h3>Restrict</h3>
<p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
</div>
<div class="ui-g-12 ui-md-4">
<h3>Navigators</h3>
<p-calendar [(ngModel)]="date5" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date5|date}}
</div>
<div class="ui-g-12 ui-md-4">
<h3>Time</h3>
<p-calendar [(ngModel)]="date6" [showTime]="true"></p-calendar> {{date6}}
</div>
</div>
<h3>Inline {{date7|date}}</h3>
<p-calendar [(ngModel)]="date7" [inline]="true"></p-calendar>
export class CalendarDemo {
date1: Date;
date2: Date;
date3: Date;
date4: Date;
date5: Date;
date6: Date;
date7: Date;
minDate: Date;
maxDate: Date;
es: any;
ngOnInit() {
this.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" ]
}
this.tr = {
firstDayOfWeek : 1
}
let today = new Date();
let month = today.getMonth();
let prevMonth = (month === 0) ? 11 : month -1;
let nextMonth = (month === 11) ? 0 : month + 1;
this.minDate = new Date();
this.minDate.setMonth(prevMonth);
this.maxDate = new Date();
this.maxDate.setMonth(nextMonth);
}
}