Календарь
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 |
|---|---|---|---|---|---|---|---|
| 39 | 28 | 29 | 30 | 1 | 2 | 3 | 4 |
| 40 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 41 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 42 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 43 | 26 | 27 | 28 | 29 | 30 | 31 | 1 |
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. |