Datepicker

Overview

Import the component and drop it into a template.

import { DatepickerComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [DatepickerComponent],
})

Basic usage:

<gog-datepicker label="Date of birth" [max]="today" [(value)]="birthday" />

One pattern, both directions

format is a token pattern — yyyy, MM, dd, HH, hh, mm, ss, a — and it is used for both rendering and parsing. That is what makes allowTextInput safe: whatever the field displays can be typed back in. 31.02.2026 is rejected rather than silently becoming 3 March, which is what a naive new Date(text) would do.

<!-- The same pattern renders and parses, so what is written can be read back. -->
<gog-datepicker label="ISO" format="yyyy-MM-dd" [(value)]="isoDate" />

Examples

<gog-datepicker
  label="Stay"
  selectionMode="range"
  [numberOfMonths]="2"
  [(value)]="stay"
/>

<gog-datepicker
  label="Meeting"
  format="dd.MM.yyyy HH:mm"
  [showTime]="true"
  hourFormat="24"
  [minuteStep]="15"
  [(value)]="meeting"
/>

<gog-datepicker [inline]="true" [(value)]="inlineDate" />

<gog-datepicker
  label="Deadline"
  errorDisplay="auto"
  errorMessage="A deadline is required"
  [clearable]="true"
  [disabledDates]="weekends"
  [formControl]="deadline"
/>

The two footer actions

The panel's footer carries two separate actions, never one: showTodayButton (on by default) selects today, and showThisMonthButton (off by default) only moves the view back to the current month. A single button doing both is ambiguous — after paging away, the same label reads as "take me back" to one person and "set it to today" to another.

"Today" is disabled when min/max or disabledDates rule today out, rather than silently doing nothing when pressed.

App-wide defaults

A locale and a date format repeated on every date input is exactly the boilerplate GOG_CONFIG exists to remove. An instance's own input always wins.

import { provideGogConfig } from '@guildofgleks/ui';

bootstrapApplication(App, {
  providers: [
    provideGogConfig({
      datepicker: {
        locale: 'de-DE',
        firstDayOfWeek: 1,
        format: 'dd.MM.yyyy',
      },
    }),
  ],
});

API Reference

Inputs

Outputs

Styling Tokens

Every CSS custom property the field and its panel paint with. The grid inside the panel is themed by gog-calendar's own --gog-calendar-* tokens. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.