Import


import {CalendarModule} from 'primeng/calendar';

Getting Started

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;

}

Model Driven Forms

Calendar can be used in a model driven form as well.


<p-calendar formControlName="date"></p-calendar>

Popup and Inline

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>

Selection Mode

By default calendar allows selecting one date and 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.

DateFormat

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.

d - day of month (no leading zero)
dd - day of month (two digit)
o - day of the year (no leading zeros)
oo - day of the year (three digit)
D - day name short
DD - day name long
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote
anything else - literal text

Time

TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option.


<p-calendar [(ngModel)]="value" showTime="true" hourFormat="12"></p-calendar>
<p-calendar [(ngModel)]="value" showTime="true" hourFormat="24"></p-calendar>

Date Restriction

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="true"></p-calendar>

Disable specific dates and/or days

To disable specific dates or days, set readonlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options.


<p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="true"></p-calendar>

Button Bar

Button bar displays today and clear buttons and enabled using showButtonBar property.


<p-calendar [(ngModel)]="dateValue" showButtonBar="true"></p-calendar>

Localization

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" ],
            today: 'Today',
            clear: 'Clear'
        };
    }
}

Custom Content

Calendar UI accepts custom content using p-header and p-footer components.


<p-calendar [(ngModel)]="dateValue">
    <p-header>Header</p-header>
    <p-footer>Footer</p-footer>
</p-calendar>

In addition, cell contents can be templated using an ng-template with a pTemplate directive whose value is "date". This is a handy feature to highlight specific dates. Note that the implicit variable 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 21st of each month.


<p-calendar [(ngModel)]="date10">
    <ng-template pTemplate="date" let-date>
        <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#7cc67c' : 'inherit'}" style="border-radius:50%">{{date.day}}</span>
    </ng-template>
</p-calendar>

Properties

Name	Type	Default	Description
defaultDate	Date	null	Set the date to highlight on first opening if the field is blank.
selectionMode	string	single	Defines the quantity of the selection, valid values are "single", "multiple" and "range".
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.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
name	string	null	Name of the input element.
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	true	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.
showOnFocus	boolean	true	When disabled, datepicker will not be visible with input focus.
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 ng-template variable of another element.
readonlyInput	boolean	null	When specified, prevents entering the date manually with keyboard.
shortYearCutoff	string	+10	The cutoff year for determining the century for a date.
minDate	Date	null	The minimum selectable date.
maxDate	Date	null	The maximum selectable date.
disabledDates	Array<Date>	null	Array with dates that should be disabled (not selectable).
disabledDays	Array<number>	null	Array with weekday numbers that should be disabled (not selectable).
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	null	The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
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.
timeOnly	boolean	false	Whether to display timepicker only.
dataType	string	date	Type of the value to write back to ngModel, default is date and alternative is string.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
tabindex	number	null	Index of the element in tabbing order.
showSeconds	boolean	false	Whether to show the seconds in time picker.
stepHour	number	1	Hours to change per step.
stepMinute	number	1	Minutes to change per step.
stepSecond	number	1	Seconds to change per step.
utc	boolean	false	Whether to convert date to UTC on selection.
maxDateCount	number	null	Maximum number of selectable dates in multiple mode.
showButtonBar	boolean	false	Whether to display today and clear buttons at the footer
todayButtonStyleClass	string	ui-secondary-button	Style class of the today button.
clearButtonStyleClass	string	ui-secondary-button	Style class of the clear button.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
panelStyleClass	string	null	Style class of the datetimepicker container element.
keepInvalid	boolean	false	Keep invalid value when input blur.

Events

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.
onFocus	event: Focus event	Callback to invoke on focus of input field.
onClose	event: Close event	Callback to invoke when datepicker panel is closed.
onInput	event: Input event	Callback to invoke when input field is being typed.
onTodayClick	event: Click event	Callback to invoke when today button is clicked.
onClearClick	event: Click event	Callback to invoke when clear button is clicked.
onMonthChange	event.month: New month event.year: New year	Callback to invoke when a month is changed using the navigators.

Styling

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

Dependencies

None.

View on GitHub


<div class="ui-g ui-fluid">
    <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>Min-Max</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>Disable Days</h3>
        <p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="true"></p-calendar> {{date5|date}}
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Navigators</h3>
        <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Time</h3>
        <p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar> {{date7}}
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Time Only </h3>
        <p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Multiple </h3>
        <p-calendar [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Range</h3>
        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true"></p-calendar>
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Button Bar</h3>
        <p-calendar [(ngModel)]="date9" showButtonBar="true"></p-calendar>
    </div>

    <div class="ui-g-12 ui-md-4">
        <h3>Date Template</h3>
        <p-calendar [(ngModel)]="date10">
            <ng-template pTemplate="date" let-date>
                <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#7cc67c' : 'inherit'}" style="border-radius:50%">{{date.day}}</span>
            </ng-template>
        </p-calendar>
    </div>
</div>

<h3>Inline</h3>
<p-calendar [(ngModel)]="date11" [inline]="true"></p-calendar>


export class CalendarDemo {

    date1: Date;

    date2: Date;

    date3: Date;

    date4: Date;

    date5: Date;

    date6: Date;

    date7: Date;

    date8: Date;

    date9: Date;

    date10: Date;

    date11: Date;

    dates: Date[];

    rangeDates: Date[];

    minDate: Date;

    maxDate: Date;

    es: any;

    invalidDates: Array<Date>

    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" ],
            today: 'Hoy',
            clear: 'Borrar'
        }

        this.tr = {
            firstDayOfWeek : 1
        }

        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];
    }
}