import {Calendar} from 'primeng/primeng';
Two-way value binding is defined using the standard ngModel directive.
<p-calendar [(ngModel)]="dateValue"></p-calendar>
export class MyModel {
dateValue:string;
}
Calendar can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-calendar ngControl="date"></p-calendar>
Calendar is displayed in a popup by default, enable inline option for inline display.
<p-calendar [(ngModel)]="dateValue" [inline]="true"></p-calendar>
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>
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>
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>
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 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.
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. |
icon | string | fa-calendar | Icon of the calendar button. |
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 |
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: ""
};
}
}