Календарь
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
Wk | Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|---|
17 | 27 | 28 | 29 | 30 | 1 | 2 | 3 |
18 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
19 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
20 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
21 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Float Label
Размеры
Свойства
Name | Type | Default | Description |
---|---|---|---|
defaultDate | Date | null | Set the date to highlight on first opening if the field is blank. |
selectionMode | string | single | Defines the quantity of the selection, valid values are "single", "multiple" and "range". |
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. |
inputId | string | null | Identifier of the focus input to match a label defined for the component. |
name | string | null | Name of the input element. |
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 which can also be defined at locale settings. |
inline | boolean | false | When enabled, displays the calendar as inline. Default is false for popup mode. |
showOtherMonths | boolean | true | 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. |
showOnFocus | boolean | true | When disabled, datepicker will not be visible with input focus. |
showWeek | boolean | false | When enabled, calendar will show week numbers. |
icon | string | pi pi-calendar | Icon of the calendar button. |
appendTo | any | null | Target 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). |
readonlyInput | boolean | null | When specified, prevents entering the date manually with keyboard. |
shortYearCutoff | string | +10 | The cutoff year for determining the century for a date. |
minDate | Date | null | The minimum selectable date. |
maxDate | Date | null | The maximum selectable date. |
disabledDates | Array<Date> | null | Array with dates that should be disabled (not selectable). |
disabledDays | Array<number> | null | Array with weekday numbers that should be disabled (not selectable). |
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 | null | The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020). |
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. |
timeSeparator | string | : | Separator of time selector. |
dataType | string | date | Type of the value to write back to ngModel, default is date and alternative is string. |
required | boolean | false | When present, it specifies that an input field must be filled out before submitting the form. |
tabindex | number | null | Index of the element in tabbing order. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
iconAriaLabel | string | null | Defines a string that labels the icon button for accessibility. |
showSeconds | boolean | false | Whether to show the seconds in time picker. |
stepHour | number | 1 | Hours to change per step. |
stepMinute | number | 1 | Minutes to change per step. |
stepSecond | number | 1 | Seconds to change per step. |
maxDateCount | number | null | Maximum number of selectable dates in multiple mode. |
showButtonBar | boolean | false | Whether to display today and clear buttons at the footer |
todayButtonStyleClass | string | p-secondary-button | Style class of the today button. |
clearButtonStyleClass | string | p-secondary-button | Style class of the clear button. |
baseZIndex | number | 0 | Base zIndex value to use in layering. |
autoZIndex | boolean | true | Whether to automatically manage layering. |
panelStyleClass | string | null | Style class of the datetimepicker container element. |
panelStyle | object | null | Inline style of the datetimepicker container element. |
keepInvalid | boolean | false | Keep invalid value when input blur. |
hideOnDateTimeSelect | boolean | true | Whether to hide the overlay on date selection. |
numberOfMonths | number | 1 | Number of months to display. |
view | string | date | Type of view to display, valid values are "date" for datepicker and "month" for month picker. |
multipleSeparator | string | , | Separator for multiple selection mode. |
rangeSeparator | string | - | Separator for joining start and end dates on range selection mode. |
touchUI | boolean | false | When enabled, calendar overlay is displayed as optimized for touch devices. |
focusTrap | boolean | true | When enabled, can only focus on elements inside the calendar. |
showTransitionOptions | string | .12s cubic-bezier(0, 0, 0.2, 1) | Transition options of the show animation. |
hideTransitionOptions | string | .1s linear | Transition options of the hide animation. |
firstDayOfWeek | number | 0 | Defines the first of the week for various date calculations. |
События
Name | Parameters | Description |
---|---|---|
onSelect | value: Selected value | Callback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually. |
onBlur | event: Blur event | Callback to invoke on blur of input field. |
onFocus | event: Focus event | Callback to invoke on focus of input field. |
onClose | event: Close event | Callback to invoke when datepicker panel is closed. |
onShow | event: Animation event | Callback to invoke when datepicker panel is visible. |
onClickOutside | event: Click event | Callback to invoke when click outside of datepicker panel. |
onInput | event: Input event | Callback to invoke when input field is being typed. |
onTodayClick | event: Click event | Callback to invoke when today button is clicked. |
onClearClick | event: Click event | Callback to invoke when clear button is clicked. |
onMonthChange | event.month: New month<br>event.year: New year | Callback to invoke when a month is changed using the navigators. |
onYearChange | event.month: New month<br>event.year: New year | Callback to invoke when a year is changed using the navigators. |
Методы
Name | Parameters | Description |
---|---|---|
toggle | - | Toggles the visibility of the calendar. |
Шаблоны
Name | Parameters |
---|---|
header | - |
footer | - |
date | $implicit: Value of the component |
Стилизация
Name | Element |
---|---|
p-calendar | Main container element |
p-calendar-w-btn | Main container element when button is enabled. |
p-calendar-timeonly | Main container element in time picker only mode. |
p-inputtext | Input element |
p-datepicker | Datepicker element |
p-datepicker-inline | Datepicker element in inline mode |
p-datepicker-monthpicker | Datepicker element in month view. |
p-datepicker-touch-p | Datepicker element in touch p mode. |
p-datepicker-calendar | Table containing dates of a month. |
p-datepicker-current-day | Cell of selected date. |
p-datepicker-today | Cell of today's date. |