Компоненты PrimeNG
Calendar

Календарь

PrimeNG/Calendar (opens in a new tab)

Календарь - это компонент ввода и выбора даты.

С чего начать

Подключите модуль

import { CalendarModule } from 'primeng/calendar';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-calendar',
  templateUrl: './prime-calendar.component.html',
  styleUrls: ['./prime-calendar.component.scss']
})
export class PrimeCalendarComponent implements OnInit {
 
  constructor() { }
 
  dates: Date[] = [];
  rangeDates: Date[] = [];
  minDate = new Date();
  maxDate = new Date();
  invalidDates: Date[] = [];
 
  ngOnInit(): void {
    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.setMonth(prevMonth);
    this.minDate.setFullYear(prevYear);
    this.maxDate.setMonth(nextMonth);
    this.maxDate.setFullYear(nextYear);
 
    let invalidDate = new Date();
    invalidDate.setDate(today.getDate() - 1);
    this.invalidDates = [today, invalidDate];
  }
 
}

Встройте компонент с помощью тэга p-calendar.

Popup

BasicDateFormatIconMin-MaxDisable DaysNavigatorsTimeTime OnlyMultipleRangeMonth PickerTouch UI

Inline

WkSuMoTuWeThFrSa
1727282930123
1845678910
1911121314151617
2018192021222324
2125262728293031

Float Label

Размеры

Свойства

NameTypeDefaultDescription
defaultDateDatenullSet the date to highlight on first opening if the field is blank.
selectionModestringsingleDefines the quantity of the selection, valid values are "single", "multiple" and "range".
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
inputStylestringnullInline style of the input field.
inputStyleClassstringnullStyle class of the input field.
inputIdstringnullIdentifier of the focus input to match a label defined for the component.
namestringnullName of the input element.
placeholderstringnullPlaceholder text for the input.
disabledbooleanfalseWhen specified, disables the component.
dateFormatstringmm/dd/yyFormat of the date which can also be defined at locale settings.
inlinebooleanfalseWhen enabled, displays the calendar as inline. Default is false for popup mode.
showOtherMonthsbooleantrueWhether 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.
selectOtherMonthsbooleanfalseWhether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
showIconbooleanfalseWhen enabled, displays a button with icon next to input.
showOnFocusbooleantrueWhen disabled, datepicker will not be visible with input focus.
showWeekbooleanfalseWhen enabled, calendar will show week numbers.
iconstringpi pi-calendarIcon of the calendar button.
appendToanynullTarget element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
readonlyInputbooleannullWhen specified, prevents entering the date manually with keyboard.
shortYearCutoffstring+10The cutoff year for determining the century for a date.
minDateDatenullThe minimum selectable date.
maxDateDatenullThe maximum selectable date.
disabledDatesArray<Date>nullArray with dates that should be disabled (not selectable).
disabledDaysArray<number>nullArray with weekday numbers that should be disabled (not selectable).
monthNavigatorbooleanfalseWhether the month should be rendered as a dropdown instead of text.
yearNavigatorbooleanfalseWhether the year should be rendered as a dropdown instead of text.
yearRangestringnullThe range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
showTimebooleanfalseWhether to display timepicker.
hourFormatstring24Specifies 12 or 24 hour format.
localeobjectnullAn object having regional configuration properties for the calendar.
timeOnlybooleanfalseWhether to display timepicker only.
timeSeparatorstring:Separator of time selector.
dataTypestringdateType of the value to write back to ngModel, default is date and alternative is string.
requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
tabindexnumbernullIndex of the element in tabbing order.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
iconAriaLabelstringnullDefines a string that labels the icon button for accessibility.
showSecondsbooleanfalseWhether to show the seconds in time picker.
stepHournumber1Hours to change per step.
stepMinutenumber1Minutes to change per step.
stepSecondnumber1Seconds to change per step.
maxDateCountnumbernullMaximum number of selectable dates in multiple mode.
showButtonBarbooleanfalseWhether to display today and clear buttons at the footer
todayButtonStyleClassstringp-secondary-buttonStyle class of the today button.
clearButtonStyleClassstringp-secondary-buttonStyle class of the clear button.
baseZIndexnumber0Base zIndex value to use in layering.
autoZIndexbooleantrueWhether to automatically manage layering.
panelStyleClassstringnullStyle class of the datetimepicker container element.
panelStyleobjectnullInline style of the datetimepicker container element.
keepInvalidbooleanfalseKeep invalid value when input blur.
hideOnDateTimeSelectbooleantrueWhether to hide the overlay on date selection.
numberOfMonthsnumber1Number of months to display.
viewstringdateType of view to display, valid values are "date" for datepicker and "month" for month picker.
multipleSeparatorstring,Separator for multiple selection mode.
rangeSeparatorstring-Separator for joining start and end dates on range selection mode.
touchUIbooleanfalseWhen enabled, calendar overlay is displayed as optimized for touch devices.
focusTrapbooleantrueWhen enabled, can only focus on elements inside the calendar.
showTransitionOptionsstring.12s cubic-bezier(0, 0, 0.2, 1)Transition options of the show animation.
hideTransitionOptionsstring.1s linearTransition options of the hide animation.
firstDayOfWeeknumber0Defines the first of the week for various date calculations.

События

NameParametersDescription
onSelectvalue: Selected valueCallback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually.
onBlurevent: Blur eventCallback to invoke on blur of input field.
onFocusevent: Focus eventCallback to invoke on focus of input field.
onCloseevent: Close eventCallback to invoke when datepicker panel is closed.
onShowevent: Animation eventCallback to invoke when datepicker panel is visible.
onClickOutsideevent: Click eventCallback to invoke when click outside of datepicker panel.
onInputevent: Input eventCallback to invoke when input field is being typed.
onTodayClickevent: Click eventCallback to invoke when today button is clicked.
onClearClickevent: Click eventCallback to invoke when clear button is clicked.
onMonthChangeevent.month: New month<br>event.year: New yearCallback to invoke when a month is changed using the navigators.
onYearChangeevent.month: New month<br>event.year: New yearCallback to invoke when a year is changed using the navigators.

Методы

NameParametersDescription
toggle-Toggles the visibility of the calendar.

Шаблоны

NameParameters
header-
footer-
date$implicit: Value of the component

Стилизация

NameElement
p-calendarMain container element
p-calendar-w-btnMain container element when button is enabled.
p-calendar-timeonlyMain container element in time picker only mode.
p-inputtextInput element
p-datepickerDatepicker element
p-datepicker-inlineDatepicker element in inline mode
p-datepicker-monthpickerDatepicker element in month view.
p-datepicker-touch-pDatepicker element in touch p mode.
p-datepicker-calendarTable containing dates of a month.
p-datepicker-current-dayCell of selected date.
p-datepicker-todayCell of today's date.