Calendar Calendar is an input component to select a date, time or datetime.

Basic

  {{date1}}

Spanish

  {{date2}}

ShowAnim and Icon

  {{date3}}

ButtonPanel

  {{date4}}

Navigators

  {{date5}}

Multiple Months

  {{date6}}

Show Weeks-Months

  {{date7}}

Restrict

  {{date8}}

Default Date

  {{date9}}

DateTime

  {{date10}}

Custom Time

  {{date11}}

Time Only

  {{date12}}

Inline

  {{date13}}

Import


import {Calendar} from 'primeng/primeng';

Getting Started

Two-way value binding is defined using the standard ngModel directive.


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


export class MyModel {
    dateValue:string;
}

Model Driven Forms

Calendar can be used in a model driven form as well by defining ngFormControl or ngControl.


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

Popup and Inline

Calendar is displayed in a popup by default, enable inline option for inline display.


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

DateFormat

Default date format is mm/dd/yy, to customize this use dateFormat property. See here for the date format patterns.


<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>

Time

TimePicker is enabled if timeOnly or timeFormat properties are defined. See here for available timeformat options.


<p-calendar [(ngModel)]="dateTimeValue" dateFormat="dd.mm.yy" timeFormat="HH:mm"></p-calendar>

Show Effect

Calendar popup can be displayed with various effects. fadeIn is the default and other available options are slideDown, slide and clip.


<p-calendar [(ngModel)]="dateValue" showAnim="slideDown"></p-calendar>

Date Restriction

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 [(ngModel)]="dateValue" minDate="-1m" maxDate="+1m" [readonlyInput]="true">></p-calendar>

Localization

Localization for different languages and formats is defined by binding the settings object to the locale property. Following is a Spanish calendar.


<p-calendar [(ngModel)]="dateValue" [locale]="es"></p-calendar>


export class MyModel {
    
    es: any;
    
    ngOnInit() {
        this.es = {
            //date
            closeText: "Cerrar",
        	prevText: "<Ant",
        	nextText: "Sig>",
        	currentText: "Hoy",
        	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" ],
        	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" ],
        	weekHeader: "Sm",
        	dateFormat: "dd/mm/yy",
        	firstDay: 1,
        	isRTL: false,
        	showMonthAfterYear: false,
        	yearSuffix: "" 
            
            //time
            timeOnlyTitle: 'Elegir una hora',
    		timeText: 'Hora',
    		hourText: 'Horas',
    		minuteText: 'Minutos',
    		secondText: 'Segundos',
    		millisecText: 'Milisegundos',
    		microsecText: 'Microsegundos',
    		timezoneText: 'Uso horario',
    		timeFormat: 'HH:mm',
    		timeSuffix: '',
    		amNames: ['a.m.', 'AM', 'A'],
    		pmNames: ['p.m.', 'PM', 'P'],
        };
    }
}

Translations for datepicker are available at here and for the timepicker, here.

Attributes

Name Type Default Description
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.
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.
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.
showIcon boolean false When enabled, displays a button with icon next to input.
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.
timeFormat string HH:mm String of format tokens to be replaced with the time.
timeOnly boolean false Hides the datepicker and only provide a time interface.
stepHour number 1 Hours per step the slider makes.
stepMinute number 1 Minutes per step the slider makes.
stepSecond number 1 Seconds per step the slider makes.
hourMin number 0 The minimum hour allowed.
hourMax number 0 The maximum hour allowed.
minuteMin number 0 The minimum minute allowed.
minuteMax number 0 The maximum minute allowed.
secondMin number 0 The minimum second allowed.
secondMax number 0 The maximum second allowed.
hourGrid number 0 Intervals hours scaler.
minuteGrid number 0 Intervals minutes scaler.
secondGrid number 0 Intervals secons scaler.
timeControlType string slider Defines the ui controls for time input, valid values are slider and select.
horizontalTimeControls boolean false Displays select elements horizontally when timeControlType is set to select.
minTime string null String of the minimum time allowed. '8:00 am' will restrict to times after 8am.
maxTime string null String of the maximum time allowed. '8:00 pm' will restrict to times before 8pm.
timezoneList array null An array of timezones used to populate the timezone select. Can be an array of values or an array of objects: { label: "EDT", value: -240 }. The value should be the offset number in minutes. So "-0400" which is the format "-hhmm", would equate to -240 minutes.
locale object null An object having regional configuration properties for the calendar.

Events

Name Parameters Description
onSelect value: Selected value Callback to invoke when a date is selected.

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

jQuery UI Datepicker and DateTimePicker


<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">
            <h3>Basic</h3>
            <p-calendar [(ngModel)]="date1"></p-calendar>   {{date1}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Spanish</h3>
            <p-calendar [(ngModel)]="date2" [locale]="es"></p-calendar>   {{date2}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>ShowAnim and Icon</h3>
            <p-calendar [(ngModel)]="date3" showAnim="slideDown" [showIcon]="true"></p-calendar>   {{date3}}
        </div>
    </div>
    
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">
            <h3>ButtonPanel</h3>
            <p-calendar [(ngModel)]="date4" [showButtonPanel]="true"></p-calendar>   {{date4}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Navigators</h3>
            <p-calendar [(ngModel)]="date5" [monthNavigator]="true" [yearNavigator]="true"></p-calendar>   {{date5}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Multiple Months</h3>
            <p-calendar [(ngModel)]="date6" [numberOfMonths]="3"></p-calendar>   {{date6}}
        </div>
    </div>
    
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">
            <h3>Show Weeks-Months</h3>
            <p-calendar [(ngModel)]="date7" [showWeek]="true" [showOtherMonths]="true" [selectOtherMonths]="true"></p-calendar>   {{date7}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Restrict</h3>
            <p-calendar [(ngModel)]="date8" minDate="-1m" maxDate="+1m" [readonlyInput]="true"></p-calendar>   {{date8}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Default Date</h3>
            <p-calendar [(ngModel)]="date9" defaultDate="+1m +7d"></p-calendar>   {{date9}}
        </div>
    </div>
    
    <div class="ui-grid-row">
        <div class="ui-grid-col-4">
            <h3>DateTime</h3>
            <p-calendar [(ngModel)]="date10" dateFormat="mm/dd/yy" timeFormat="HH:mm"></p-calendar>   {{date10}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Custom Time</h3>
            <p-calendar [(ngModel)]="date11" dateFormat="mm/dd/yy" timeFormat="hh:mm tt z" timeControlType="select" [horizontalTimeControls]="true"></p-calendar>   {{date11}}
        </div>
        
        <div class="ui-grid-col-4">
            <h3>Time Only</h3>
            <p-calendar [(ngModel)]="date12" dateFormat="mm/dd/yy" timeFormat="HH:mm:ss" [timeOnly]="true"></p-calendar>   {{date12}}
            
        </div>
    </div>
</div>

<h3>Inline</h3>
<p-calendar [(ngModel)]="date12" [inline]="true"></p-calendar>   {{date13}}


export class CalendarDemo {

    date1: string;

    date2: string;

    date3: string;

    date4: string;

    date5: string;

    date6: string;

    date7: string;

    date8: string;

    date9: string;

    date10: string;
    
    date11: string;
    
    date12: string;
    
    date13: string;
    
    es: any;
    
    ngOnInit() {
        this.es = {
            closeText: "Cerrar",
        	prevText: "<Ant",
        	nextText: "Sig>",
        	currentText: "Hoy",
        	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" ],
        	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" ],
        	weekHeader: "Sm",
        	dateFormat: "dd/mm/yy",
        	firstDay: 1,
        	isRTL: false,
        	showMonthAfterYear: false,
        	yearSuffix: "" 
        };
    }
}