Calendar Calendar is an input component to select a date.

Basic

{{date1|date}}

Spanish

{{date2|date}}

Icon

{{date3|date}}

Restrict

{{date4|date}}

Navigators

{{date5|date}}

Time

{{date6}}

Time Only

Inline {{date8|date}}

Import


import {CalendarModule} from 'primeng/primeng';

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>

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="showTime" hourFormat="12"></p-calendar>
<p-calendar [(ngModel)]="value" showTime="showTime" 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="readonlyInput">></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" ]
        };
    }
}

Attributes

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.
timeOnly boolean false Whether to display timepicker only.

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.

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.


<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 class="ui-g-12 ui-md-4">
        <h3>Time Only </h3>
        <p-calendar [(ngModel)]="date7" [timeOnly]="true"></p-calendar>
    </div>
</div>

<h3>Inline {{date7|date}}</h3>
<p-calendar [(ngModel)]="date8" [inline]="true"></p-calendar> 


export class CalendarDemo {

    date1: Date;

    date2: Date;

    date3: Date;

    date4: Date;

    date5: Date;

    date6: Date;
    
    date7: Date;
    
    date8: 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);
    }
}