Calendar Calendar is an input component to select a date.

Basic

  {{date1}}

DateFormat

  {{date2}}

ShowAnim

  {{date3}}

ButtonPanel

  {{date4}}

Navigators

  {{date5}}

Multiple Months

  {{date6}}

Show Week and Months

  {{date7}}

Restrict

  {{date8}}

Default Date

  {{date9}}

Inline

  {{date10}}

Import


import {Calendar} from 'primeng/primeng';

Getting Started

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

Popup and Inline

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


<p-calendar [(value)]="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 [(value)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>

Show Effect

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>

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

Localization

Localization for different languages and formats is done by adding the necessary locale script to your application.

Attributes

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.

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-inputtext Input element

Dependencies

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