# Datepicker

- Entry point: `@koobiq/components/datepicker`
- NgModule: `KbqDatepickerModule`
- Page: https://koobiq.io/en/components/datepicker/overview

## Overview

A date field (datepicker) is a special input field with a widget for selecting a date.

**Example: Datepicker** (`datepicker-overview`)

```ts datepicker-overview-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-overview-example',
    imports: [
        FormsModule,
        LuxonDateModule,
        KbqDatepickerModule,
        KbqFormFieldModule,
        KbqIconModule
    ],
    template: `
        <div class="docs-example__datepicker-overview">
            <kbq-form-field (click)="datepicker.toggle()">
                <input [kbqDatepicker]="datepicker" [(ngModel)]="date" />
                <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                <kbq-datepicker #datepicker />
            </kbq-form-field>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerOverviewExample {
    date: DateTime | null = null;
}
```

### States

#### Inactive field

**Example: Datepicker inactive** (`datepicker-inactive`)

```ts datepicker-inactive-example.ts
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { DateAdapter, KbqFormsModule } from '@koobiq/components/core';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-inactive-example',
    imports: [
        FormsModule,
        LuxonDateModule,
        KbqDatepickerModule,
        KbqFormFieldModule,
        KbqFormsModule,
        KbqIconModule
    ],
    template: `
        <div class="docs-example__datepicker-inactive kbq-form-vertical">
            <div class="kbq-form__row">
                <label class="kbq-form__label">Disabled empty field</label>
                <kbq-form-field>
                    <input [disabled]="true" [kbqDatepicker]="emptyDatepicker" [placeholder]="''" />
                    <kbq-datepicker-toggle-icon kbqSuffix [for]="emptyDatepicker" />
                    <kbq-datepicker #emptyDatepicker />
                </kbq-form-field>
            </div>

            <br />

            <div class="kbq-form__row">
                <label class="kbq-form__label">Read-only field with data</label>
                <kbq-form-field>
                    <input [disabled]="true" [kbqDatepicker]="datepicker" [ngModel]="selectedDate" />
                    <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                    <kbq-datepicker #datepicker />
                </kbq-form-field>
            </div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerInactiveExample {
    private adapter = inject<DateAdapter<DateTime>>(DateAdapter);

    selectedDate: DateTime;

    constructor() {
        this.selectedDate = this.adapter.createDate(1989, 11, 13);
    }
}
```

### Required

If the date field is required, use the `required` parameter.

**Example: Datepicker required** (`datepicker-required`)

```ts datepicker-required-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-required-example',
    imports: [
        FormsModule,
        LuxonDateModule,
        KbqDatepickerModule,
        KbqFormFieldModule,
        KbqIconModule
    ],
    template: `
        <div class="docs-example__datepicker-required">
            <kbq-form-field (click)="datepicker.toggle()">
                <input [kbqDatepicker]="datepicker" [required]="true" [(ngModel)]="date" />
                <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                <kbq-datepicker #datepicker />
            </kbq-form-field>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerRequiredExample {
    date: DateTime | null = null;
}
```

### Usage examples

#### Date selection restriction

The range is configured with two separate pairs of bindings, and both are needed:

- `minDate` / `maxDate` on `<kbq-datepicker>` restrict the calendar — out-of-range days are
  not selectable.
- `min` / `max` on the `<input>` drive validation, including dates typed with the keyboard or
  pasted. A value outside the range is still written to the form control, and the control is
  marked invalid with `kbqDatepickerMin` or `kbqDatepickerMax`.

Validation requires a form control on the input (`ngModel`, `formControl` or `formControlName`) —
without one the validators never run.

`min` and `max` are compared with the time part included rather than by calendar day, because the
input keeps the time of the value it parses. Set the lower bound to the start of the first allowed
day and the upper bound to the end of the last allowed day, so that both boundary days stay valid.

**Example: Datepicker minimax** (`datepicker-minimax`)

```ts datepicker-minimax-example.ts
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { DateAdapter, KbqFormsModule } from '@koobiq/components/core';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqToolTipModule } from '@koobiq/components/tooltip';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-minimax-example',
    imports: [
        FormsModule,
        LuxonDateModule,
        KbqDatepickerModule,
        KbqFormFieldModule,
        KbqToolTipModule,
        KbqIconModule,
        KbqFormsModule
    ],
    template: `
        <div class="docs-example__datepicker-minimax">
            <div class="kbq-form-vertical">
                <div class="kbq-form__row">
                    <label class="kbq-form__label">Select a date between December 14, 2023, and August 25, 2024.</label>
                    <kbq-form-field
                        #tooltip="kbqTooltip"
                        kbqTooltipModifier="warning"
                        [kbqTooltip]="'Only numbers'"
                        (click)="datepicker.toggle()"
                    >
                        <input
                            [kbqDatepicker]="datepicker"
                            [kbqValidationTooltip]="tooltip"
                            [max]="maxDate"
                            [min]="minDate"
                            [(ngModel)]="date"
                        />
                        <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                        <kbq-datepicker #datepicker [maxDate]="maxDate" [minDate]="minDate" />
                    </kbq-form-field>
                </div>
            </div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerMinimaxExample {
    private adapter = inject<DateAdapter<DateTime>>(DateAdapter);

    readonly minDate = this.adapter.createDate(2023, 11, 14);
    // The bounds are compared as instants and the input keeps the time part of what it parses, so
    // the upper bound has to be the end of the last allowed day for that day to stay valid.
    readonly maxDate = this.adapter.createDate(2024, 7, 25).endOf('day');

    date: DateTime | null = null;
}
```

#### Date range

There is no dedicated date range widget, so use separate input fields to specify the boundaries.

**Example: Datepicker range** (`datepicker-range`)

```ts datepicker-range-example.ts
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { DateAdapter, KbqFormsModule } from '@koobiq/components/core';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-range-example',
    imports: [
        LuxonDateModule,
        KbqDatepickerModule,
        KbqFormFieldModule,
        KbqIconModule,
        KbqFormsModule
    ],
    template: `
        <div class="docs-example__datepicker-range">
            <div class="kbq-form-vertical">
                <div class="kbq-form__row">
                    <label class="kbq-form__label">Vacation period:</label>
                    <div>
                        <kbq-form-field class="layout-margin-right-s" (click)="datepicker.toggle()">
                            <input [kbqDatepicker]="datepicker" />
                            <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                            <kbq-datepicker #datepicker />
                        </kbq-form-field>

                        <kbq-form-field (click)="datepicker2.toggle()">
                            <input [kbqDatepicker]="datepicker2" />
                            <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker2" />
                            <kbq-datepicker #datepicker2 />
                        </kbq-form-field>
                    </div>
                </div>
            </div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerRangeExample {
    private adapter = inject<DateAdapter<DateTime>>(DateAdapter);

    readonly minDate = this.adapter.createDate(2023, 11, 14);
    readonly maxDate = this.adapter.createDate(2024, 7, 25);
}
```

#### Using Datepicker and Timepicker together

**Example: Datepicker and timepicker** (`datepicker-and-timepicker`)

```ts datepicker-and-timepicker-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
import { KbqFormsModule } from '@koobiq/components/core';
import { KbqDatepickerModule } from '@koobiq/components/datepicker';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqTimepickerModule } from '@koobiq/components/timepicker';
import { DateTime } from 'luxon';

@Component({
    selector: 'datepicker-and-timepicker-example',
    imports: [
        FormsModule,
        LuxonDateModule,
        KbqTimepickerModule,
        KbqDatepickerModule,
        KbqFormsModule,
        KbqIconModule
    ],
    template: `
        <div class="docs-example__datepicker-and-timepicker">
            <div class="kbq-form-vertical">
                <label class="kbq-form__label">Package release date and time</label>
                <div class="kbq-form__row">
                    <div>
                        <kbq-form-field class="layout-margin-right-s" (click)="datepicker.toggle()">
                            <input [kbqDatepicker]="datepicker" [ngModel]="selectedDateTime" />
                            <kbq-datepicker-toggle-icon kbqSuffix [for]="datepicker" />
                            <kbq-datepicker #datepicker />
                        </kbq-form-field>

                        <kbq-form-field>
                            <i kbq-icon="kbq-clock_16" kbqPrefix></i>
                            <input kbqTimepicker [ngModel]="selectedDateTime" />
                        </kbq-form-field>
                    </div>
                </div>
            </div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatepickerAndTimepickerExample {
    selectedDateTime: DateTime;
}
```

## API

### Components

#### KbqCalendarHeader (component)

Default header for KbqCalendar

```ts
@Component({ selector: 'kbq-calendar-header', exportAs: 'kbqCalendarHeader' })
class KbqCalendarHeader<D> {
    activeDate = model<D | undefined>();
    maxDate = input<D | null | undefined>();
    minDate = input<D | null | undefined>();
    readonly monthSelected = output<D>();
    readonly yearSelected = output<D>();
    monthNames: MonthName[];
    selectedMonth: number;
    years: number[];
    selectedYear: number;
    get previousDisabled(): boolean;
    get currentDisabled(): boolean;
    get nextDisabled(): boolean;
    onMonthSelected(month: number): void;
    onYearSelected(year: number): void;
    selectCurrentDate(): void;
    selectPreviousMonth(): void;
    selectNextMonth(): void;
}
```

- `onMonthSelected()`: `void` — Handles when a new month is selected.
- `onYearSelected()`: `void` — Handles when a new year is selected.
- `selectPreviousMonth()`: `void` — Handles user clicks on the previous button.
- `selectNextMonth()`: `void` — Handles user clicks on the next button.

#### KbqDatepicker (component)

Component responsible for managing the datepicker popup/dialog.

```ts
@Component({ selector: 'kbq-datepicker', exportAs: 'kbqDatepicker' })
class KbqDatepicker<D> {
    hasBackdrop = input<boolean | undefined>();
    startAt = input<D | null | undefined>();
    disabled = input<boolean | undefined>();
    opened = input<boolean | undefined>();
    readonly minDate = input<D | null>();
    readonly maxDate = input<D | null>();
    readonly panelClass = input<string | string[]>();
    readonly dateClass = input<(date: D) => KbqCalendarCellCssClasses>();
    readonly backdropClass = input<string>(
        'cdk-overlay-transparent-backdrop'
    );
    readonly yearSelected = output<D>();
    readonly monthSelected = output<D>();
    readonly openedStream = output<void>({ alias: 'opened' });
    readonly closedStream = output<void>({ alias: 'closed' });
    selected: D | null;
    get dateFilter(): (date: D | null) => boolean;
    get value(): D | null;
    readonly disabledChange: Subject<boolean>;
    readonly selectedChanged: Subject<D>;
    id: string;
    popupRef: OverlayRef | null;
    datepickerInput: KbqDatepickerInput<D>;
    select(date: D): void;
    selectYear(normalizedYear: D): void;
    selectMonth(normalizedMonth: D): void;
    registerInput(input: KbqDatepickerInput<D>): void;
    open(): void;
    close(restoreFocus?: boolean): void;
    toggle(): void;
}
```

- `[startAt]`: `D | null | undefined` — The date to open the calendar to initially.
- `[disabled]`: `boolean | undefined` — Whether the datepicker pop-up should be disabled.
- `[opened]`: `boolean | undefined` — Whether the calendar is open.
- `[minDate]`: `D | null` — The minimum selectable date.
- `[maxDate]`: `D | null` — The maximum selectable date.
- `[panelClass]`: `string | string[]` — Classes to be passed to the date picker panel. Supports the same syntax as the `[class]` binding.
- `[dateClass]`: `(date: D) => KbqCalendarCellCssClasses` — Function that can be used to add custom CSS classes to dates.
- `[localeOverrides]`: `KbqPartialLocaleData | undefined` — Localized strings for this element and its subtree, keyed by locale section. Every key is optional at
  every depth.
- `(yearSelected)`: `D` — Emits selected year in multiyear view.
  This doesn't imply a change on the selected date.
- `(monthSelected)`: `D` — Emits selected month in year view.
  This doesn't imply a change on the selected date.
- `(opened)`: `void` — Emits when the datepicker has been opened.
- `(closed)`: `void` — Emits when the datepicker has been closed.
- `selected`: `D | null` — The currently selected date.
- `disabledChange`: `Subject<boolean>` — Emits when the datepicker is disabled.
- `selectedChanged`: `Subject<D>` — Emits new selected date when selected date changes.
- `id`: `string` — The id for the datepicker calendar.
- `popupRef`: `OverlayRef | null` — A reference to the overlay when the calendar is opened as a popup.
- `datepickerInput`: `KbqDatepickerInput<D>` — The input element this datepicker is associated with.
- `select()`: `void` — Selects the given date
- `selectYear()`: `void` — Emits the selected year in multiyear view
- `selectMonth()`: `void` — Emits selected month in year view
- `registerInput()`: `void` — Register an input with this datepicker.
  - `input`: `KbqDatepickerInput<D>` — The datepicker input to register with this datepicker.
- `open()`: `void` — Open the calendar.
- `close()`: `void` — Close the calendar.

#### KbqDatepickerToggleIconComponent (component)

```ts
@Component({ selector: 'kbq-datepicker-toggle-icon' })
class KbqDatepickerToggleIconComponent<D> implements KbqSiblingPopup {
    disabled = input<boolean | undefined>();
    readonly datepicker = input<KbqDatepicker<D>>(undefined, {
        alias: 'for'
    });
    get isAttached(): boolean;
    readonly openedChange: Observable<boolean>;
    open($event: MouseEvent): void;
}
```

- `[disabled]`: `boolean | undefined` — Whether the toggle button is disabled.
- `[for]`: `KbqDatepicker<D>` — Datepicker instance that the button will toggle.
- `isAttached`: `boolean` — Whether the calendar is currently on screen. Part of the `KbqSiblingPopup` contract.
- `openedChange`: `Observable<boolean>` — 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.
- `open()`: `void` — Opens the calendar, moving the focus to its input; closes it instead when it was open at the press.

### Directives

#### KbqDatepickerInput (directive)

Directive used to connect an input to a KbqDatepicker.

```ts
@Directive({
    selector: 'input[kbqDatepicker], input[kbqCalendar]',
    exportAs: 'kbqDatepickerInput'
})
class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, ControlValueAccessor, Validator {
    readonly errorStateMatcher = input<ErrorStateMatcher>();
    readonly placeholder = input<string | undefined>();
    readonly required = input<boolean>(false);
    readonly value = input<D | null | undefined>();
    min = input<D | null | undefined>();
    max = input<D | null | undefined>();
    readonly disabled = input<boolean>(false);
    readonly id = input<string | undefined>();
    readonly incorrectInput = output<void>();
    readonly dateChange = output<KbqDatepickerInputEvent<D>>();
    readonly dateInput = output<KbqDatepickerInputEvent<D>>();
    elementRef: ElementRef<HTMLInputElement>;
    readonly adapter: DateAdapter<D>;
    readonly errorState: Signal<boolean>;
    controlType: string;
    readonly focused: Signal<boolean>;
    datepicker: KbqDatepicker<D>;
    calendar: KbqCalendar<D>;
    dateFilter: (date: D | null) => boolean;
    valueChange: EventEmitter<D | null>;
    disabledChange: EventEmitter<boolean>;
    set kbqDatepicker(value: KbqDatepicker<D>);
    set kbqCalendar(value: KbqCalendar<D>);
    set kbqDatepickerFilter(value: ((date: D | null) => boolean) | undefined);
    set kbqValidationTooltip(value: KbqTooltipTrigger);
    readonly empty: Signal<boolean>;
    get viewValue(): string;
    get ngControl(): any;
    get isReadOnly(): boolean;
    get dateInputFormat(): string;
    onInput: () => void;
    parseOnBlur: () => any;
    onContainerClick(): void;
    focus(): void;
    focusChanged(isFocused: boolean): void;
    onKeyDown(event: KeyboardEvent): void;
    onChange(): void;
    onBlur(): void;
    onPaste($event: any): any;
    toISO8601(value: D): string;
    updateErrorState(): void;
    getOrigin(): ElementRef;
}
```

- `[errorStateMatcher]`: `ErrorStateMatcher` — Object used to control when error messages are shown.
- `[placeholder]`: `string | undefined` — Placeholder of the input. Defaults to the localized date pattern.
- `[required]`: `boolean` — Whether the input is required.
- `[value]`: `D | null | undefined` — The date the input holds: set with `[value]`, by the form control, by typing and by the calendar.
- `[min]`: `D | null | undefined` — 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 `<kbq-datepicker>`.

  Compared down to the millisecond, not by calendar day: the input keeps the time part of the
  value it parses, and the comparison is made on wall-clock components rather than on absolute
  time.
- `[max]`: `D | null | undefined` — 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 `<kbq-datepicker>`.

  Compared down to the millisecond, not by calendar day: the input keeps the time part of the
  value it parses, so an upper bound meant to include its whole day has to be the end of that
  day.
- `[disabled]`: `boolean` — Whether the datepicker-input is disabled. Also set by the bound form control.
- `[id]`: `string | undefined` — Unique id of the element, generated when not provided.
- `[localeOverrides]`: `KbqPartialLocaleData | undefined` — Localized strings for this element and its subtree, keyed by locale section. Every key is optional at
  every depth.
- `(dateChange)`: `KbqDatepickerInputEvent<D>` — Emits when a `change` event is fired on this `<input>`.
- `(dateInput)`: `KbqDatepickerInputEvent<D>` — Emits when an `input` event is fired on this `<input>`.
- `errorState`: `Signal<boolean>` — Whether the input is in an error state.
- `focused`: `Signal<boolean>` — Whether the input has focus.
- `valueChange`: `EventEmitter<D | null>` — Emits when the value changes (either due to user input or programmatic change).
- `disabledChange`: `EventEmitter<boolean>` — Emits when the disabled state has changed
- `kbqDatepicker`: `KbqDatepicker<D>` — The datepicker that this input is associated with.
- `kbqCalendar`: `KbqCalendar<D>` — The calendar that this input is associated with.
- `kbqDatepickerFilter`: `((date: D | null) => boolean) | undefined` — Function that can be used to filter out dates within the datepicker. `undefined` removes the filter.
- `empty`: `Signal<boolean>` — Whether the input renders no text.
- `onBlur()`: `void` — Handles blur events on the input.
- `updateErrorState()`: `void` — Refreshes the error state of the input.
- `getOrigin()`: `ElementRef` — Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input.

#### KbqDatepickerToggleIcon (directive)

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

```ts
@Directive({ selector: '[kbqDatepickerToggleIcon]' })
class KbqDatepickerToggleIcon {}
```

### Classes

#### KbqDatepickerInputEvent (class)

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.

```ts
class KbqDatepickerInputEvent<D> {
    value: D | null;
    target: KbqDatepickerInput<D>;
    targetElement: HTMLElement;
    constructor(
        target: KbqDatepickerInput<D>,
        targetElement: HTMLElement
    );
}
```

- `value`: `D | null` — The new value for the target datepicker input.
- `target`: `KbqDatepickerInput<D>` — Reference to the datepicker input component that emitted the event.
- `targetElement`: `HTMLElement` — Reference to the native input element associated with the datepicker input.
- `constructor()`
  - `target`: `KbqDatepickerInput<D>` — Reference to the datepicker input component that emitted the event.
  - `targetElement`: `HTMLElement` — Reference to the native input element associated with the datepicker input.

### Types

#### KbqCalendarCellCssClasses (type)

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

```ts
type KbqCalendarCellCssClasses = string | string[] | Set<string> | { [key: string]: any };
```

#### MonthName (type)

```ts
type MonthName = {
    name: string;
    nameShort: string;
    value: number;
    disabled: boolean;
};
```

### Constants

#### KBQ_DATEPICKER_CONFIGURATION (const)

Deprecated: Use `KBQ_DATEPICKER_LOCALE_CONFIGURATION`. Will be removed in 22.0.0.

```ts
const KBQ_DATEPICKER_CONFIGURATION: InjectionToken<KbqDatepickerLocaleConfiguration>;
```

#### KBQ_DATEPICKER_DEFAULT_CONFIGURATION (const)

Deprecated: Use `KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION`. Will be removed in 22.0.0.

```ts
const KBQ_DATEPICKER_DEFAULT_CONFIGURATION: { placeholder: string; dateInput: string; };
```

#### KBQ_DATEPICKER_SCROLL_STRATEGY (const)

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.

```ts
const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
```

#### kbqDatepickerLocaleConfigurationProvider (const)

Utility provider for `KBQ_DATEPICKER_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the rest
keep following the active locale.

```ts
const kbqDatepickerLocaleConfigurationProvider: (
    configuration: KbqDeepPartial<KbqDatepickerLocaleConfiguration>
) => Provider;
```

#### MAX_YEAR (const)

```ts
const MAX_YEAR: number;
```