import { KbqDatepickerModule } from '@koobiq/components/datepicker';Datepicker data that requires internationalization.
| 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| Name | Description |
|---|---|
@Input() activeDate: D
|
|
@Input() maxDate: D
|
|
@Input() minDate: D
|
|
@Output('activeDateChange')
activeDateChange: OutputEmitterRef |
Emits when any date is activated. |
@Output('monthSelected')
monthSelected: OutputEmitterRef |
|
@Output('yearSelected')
yearSelected: OutputEmitterRef |
|
| currentDisabled: boolean | |
| monthNames: MonthName[] | |
| nextDisabled: boolean | |
| previousDisabled: boolean | |
| selectedMonth: number | |
| selectedYear: number | |
| years: number[] |
Can be used to override the icon of a `kbqDatepickerToggle`.
Selector: [kbqDatepickerToggleIcon]
Selector: kbq-datepicker-toggle-icon
| Name | Description |
|---|---|
@Input('for')
datepicker: InputSignal |
Datepicker instance that the button will toggle. |
@Input() disabled: boolean
|
Whether the toggle button is disabled. |
| isAttached: boolean | Whether the calendar is currently on screen. Part of the `KbqSiblingPopup` contract. |
| openedChange: Observable |
Emits `true` when the calendar opens and `false` when it closes. Part of the `KbqSiblingPopup` contract. Built on top of the `datepicker` signal rather than read once, because the instance is bound after the consumers of this stream (a tooltip on the same element subscribes in its constructor) and may be swapped later — the same reason `watchStateChanges` is re-run from `ngOnChanges`. |
Component responsible for managing the datepicker popup/dialog.
Selector: kbq-datepicker
Exported as: kbqDatepicker| Name | Description |
|---|---|
@Input() backdropClass: InputSignal |
|
@Input() dateClass: InputSignal<(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: InputSignal |
The maximum selectable date. |
@Input() minDate: InputSignal |
The minimum selectable date. |
@Input() opened: boolean
|
Whether the calendar is open. |
@Input() panelClass: InputSignal |
Classes to be passed to the date picker panel. Supports the same syntax as the `[class]` binding. |
@Input() startAt: D
|
The date to open the calendar to initially. |
@Output('closed')
closedStream: OutputEmitterRef |
Emits when the datepicker has been closed. |
@Output('monthSelected')
monthSelected: OutputEmitterRef |
Emits selected month in year view. This doesn't imply a change on the selected date. |
@Output('opened')
openedStream: OutputEmitterRef |
Emits when the datepicker has been opened. |
@Output('yearSelected')
yearSelected: OutputEmitterRef |
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 |
Directive used to connect an input to a KbqDatepicker.
Selector: input[kbqDatepicker], input[kbqCalendar]
Exported as: kbqDatepickerInput| 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: KbqTooltipTrigger
|
|
@Input() max: D
|
The maximum valid date. Drives validation only — including dates typed or pasted into the
input — and reports `kbqDatepickerMax`. The calendar is restricted separately, by `maxDate`
on the associated ` |
@Input() min: D
|
The minimum valid date. Drives validation only — including dates typed or pasted into the
input — and reports `kbqDatepickerMin`. The calendar is restricted separately, by `minDate`
on the associated ` |
@Input() placeholder: string
|
|
@Input() required: boolean
|
|
@Input() value: D
|
The value of the input. |
@Output('dateChange')
dateChange: OutputEmitterRef |
Emits when a `change` event is fired on this ``. |
@Output('dateInput')
dateInput: OutputEmitterRef |
Emits when an `input` event is fired on this ``. |
@Output('incorrectInput')
incorrectInput: OutputEmitterRef |
|
| adapter: DateAdapter |
|
| 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 |
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.
| 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. The root default keeps the datepicker usable outside `KbqDatepickerModule`'s injector; providing the token anywhere still wins over it.
const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const MAX_YEAR: number;