Datepicker
import { KbqDatepickerModule } from '@koobiq/components/datepicker';

Datepicker data that requires internationalization.

Properties
Name Description
calendarLabel: string A label for the calendar popup (used by screen readers).
changes: Subject Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.
nextMonthLabel: string A label for the next month button (used by screen readers).
nextMultiYearLabel: string A label for the next multi-year button (used by screen readers).
nextYearLabel: string A label for the next year button (used by screen readers).
openCalendarLabel: string A label for the button used to open the calendar popup (used by screen readers).
prevMonthLabel: string A label for the previous month button (used by screen readers).
prevMultiYearLabel: string A label for the previous multi-year button (used by screen readers).
prevYearLabel: string A label for the previous year button (used by screen readers).
switchToMonthViewLabel: string A label for the 'switch to month view' button (used by screen readers).
switchToMultiYearViewLabel: string A label for the 'switch to year view' button (used by screen readers).

Default header for KbqCalendar

Selector: kbq-calendar-header

Exported as: kbqCalendarHeader
Properties
Name Description
@Input()
activeDate: D
@Input()
maxDate: D
@Input()
minDate: D
@Output('activeDateChange')
activeDateChange: EventEmitter
Emits when any date is activated.
@Output('monthSelected')
monthSelected: EventEmitter
@Output('yearSelected')
yearSelected: EventEmitter
currentDisabled: boolean
monthNames: MonthName[]
nextDisabled: boolean
previousDisabled: boolean
selectedMonth: number
selectedYear: number
years: number[]
Methods
onMonthSelected
Handles when a new month is selected.
onYearSelected
Handles when a new year is selected.
selectCurrentDate
selectNextMonth
Handles user clicks on the next button.
selectPreviousMonth
Handles user clicks on the previous button.

Can be used to override the icon of a `kbqDatepickerToggle`.

Selector: [kbqDatepickerToggleIcon]

Selector: kbq-datepicker-toggle-icon

Properties
Name Description
@Input('for')
datepicker: KbqDatepicker
Datepicker instance that the button will toggle.
@Input()
disabled: boolean
Whether the toggle button is disabled.
Methods
open
Open datepicker

Selector: kbq-datepicker-toggle

Exported as: kbqDatepickerToggle
Deprecated
Properties
Name Description
@Input('for')
datepicker: KbqDatepicker
Datepicker instance that the button will toggle.
@Input()
disabled: boolean
Whether the toggle button is disabled.
button: KbqButton Underlying button element.
customIcon: KbqDatepickerToggleIcon Custom icon set by the consumer.
intl: KbqDatepickerIntl
Methods
open

Component responsible for managing the datepicker popup/dialog.

Selector: kbq-datepicker

Exported as: kbqDatepicker
Properties
Name Description
@Input()
backdropClass: string
@Input()
dateClass: (date: D) => KbqCalendarCellCssClasses
Function that can be used to add custom CSS classes to dates.
@Input()
disabled: boolean
Whether the datepicker pop-up should be disabled.
@Input()
hasBackdrop: boolean
@Input()
maxDate: D
The maximum selectable date.
@Input()
minDate: D
The minimum selectable date.
@Input()
opened: boolean
Whether the calendar is open.
@Input()
panelClass: string | string[]
Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`.
@Input()
startAt: D
The date to open the calendar to initially.
@Output('closed')
closedStream: EventEmitter
Emits when the datepicker has been closed.
@Output('monthSelected')
monthSelected: EventEmitter
Emits selected month in year view. This doesn't imply a change on the selected date.
@Output('opened')
openedStream: EventEmitter
Emits when the datepicker has been opened.
@Output('yearSelected')
yearSelected: EventEmitter
Emits selected year in multiyear view. This doesn't imply a change on the selected date.
dateFilter: (date: D) => boolean
datepickerInput: KbqDatepickerInput The input element this datepicker is associated with.
disabledChange: Subject Emits when the datepicker is disabled.
document: Document
id: string The id for the datepicker calendar.
popupRef: OverlayRef A reference to the overlay when the calendar is opened as a popup.
selected: D The currently selected date.
selectedChanged: Subject Emits new selected date when selected date changes.
stateChanges: Subject
value: D
Methods
close
Close the calendar.
open
Open the calendar.
registerInput
Register an input with this datepicker.
select
Selects the given date
selectMonth
Emits selected month in year view
selectYear
Emits the selected year in multiyear view
toggle

Directive used to connect an input to a KbqDatepicker.

Selector: input[kbqDatepicker], input[kbqCalendar]

Exported as: kbqDatepickerInput
Properties
Name Description
@Input()
disabled: boolean
Whether the datepicker-input is disabled.
@Input()
errorStateMatcher: ErrorStateMatcher
Object used to control when error messages are shown.
@Input()
id: string
@Input()
kbqCalendar: KbqCalendar
The calendar that this input is associated with.
@Input()
kbqDatepicker: KbqDatepicker
The datepicker that this input is associated with.
@Input()
kbqDatepickerFilter: (date: D) => boolean
Function that can be used to filter out dates within the datepicker.
@Input()
kbqValidationTooltip: KbqWarningTooltipTrigger
@Input()
max: D
The maximum valid date.
@Input()
min: D
The minimum valid date.
@Input()
placeholder: string
@Input()
required: boolean
@Input()
value: D
The value of the input.
@Output('dateChange')
dateChange: EventEmitter>
Emits when a `change` event is fired on this ``.
@Output('dateInput')
dateInput: EventEmitter>
Emits when an `input` event is fired on this ``.
@Output('incorrectInput')
incorrectInput: EventEmitter
calendar: KbqCalendar
configuration: any
controlType: string
dateFilter: (date: D) => boolean
dateInputFormat: string
datepicker: KbqDatepicker
disabledChange: EventEmitter Emits when the disabled state has changed
elementRef: ElementRef
empty: boolean
errorState: boolean
focused: boolean
isReadOnly: boolean
ngControl: any
onInput: () => void
onTouched: () => void
parseOnBlur: () => any
stateChanges: Subject
valueChange: EventEmitter Emits when the value changes (either due to user input or programmatic change).
viewValue: string
Methods
focus
focusChanged
getOrigin
Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input.
onBlur
Handles blur events on the input.
onChange
onContainerClick
onKeyDown
onPaste
toISO8601
updateErrorState
Refreshes the error state of the input.

An event used for datepicker input and change events. We don't always have access to a native input or change event because the event may have been triggered by the user clicking on the calendar popup. For consistency, we always use KbqDatepickerInputEvent instead.

Properties
Name Description
target: KbqDatepickerInput Reference to the datepicker input component that emitted the event.
targetElement: HTMLElement Reference to the native input element associated with the datepicker input.
value: D The new value for the target datepicker input.

Extra CSS classes that can be associated with a calendar cell.

type KbqCalendarCellCssClasses = string | string[] | Set<string> | { [key: string]: any };
type MonthName = {
    name: string;
    nameShort: string;
    value: number;
    disabled: boolean;
};

Injection token that determines the scroll handling while the calendar is open.

const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const MAX_YEAR: number;
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.