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: 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[] |
Can be used to override the icon of a `kbqDatepickerToggle`.
Selector: [kbqDatepickerToggleIcon]
Selector: kbq-datepicker-toggle-icon
| Name | Description |
|---|---|
@Input('for')
datepicker: KbqDatepicker |
Datepicker instance that the button will toggle. |
@Input() disabled: boolean
|
Whether the toggle button is disabled. |
Selector: kbq-datepicker-toggle
Exported as: kbqDatepickerToggle| 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 |
Component responsible for managing the datepicker popup/dialog.
Selector: kbq-datepicker
Exported as: kbqDatepicker| 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 |
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: 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 |
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.
const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const MAX_YEAR: number;