Form

Date Picker

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A date field with a calendar popup. The date can be typed or picked.

Usage#

app.component.ts

import { WdsDatePickerComponent } from '@wds/angular/date-picker';

Examples#

Default#

Type a date in the format of the page language (e.g. 09/24/2026, also without separators) or pick it in the calendar; ↓ in the field opens the calendar. The value is an ISO date (2026-09-24), as in <input type="date">.

Date

Show code

date-picker-default.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-default-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Date</wds-field-label>
      <wds-date-picker class="w-full"></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerDefaultDemo {}

Format#

format sets the pattern of the field: dd, MM, yyyy (or d, M, yy) and any separators.

dd/MM/yyyy

yyyy-MM-dd

Show code

date-picker-format.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-format-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-60">
        <wds-field-label>dd/MM/yyyy</wds-field-label>
        <wds-date-picker class="w-full" format="dd/MM/yyyy" value="2026-09-24"></wds-date-picker>
      </wds-field>
      <wds-field class="w-60">
        <wds-field-label>yyyy-MM-dd</wds-field-label>
        <wds-date-picker class="w-full" format="yyyy-MM-dd" value="2026-09-24"></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerFormatDemo {}

Locale#

locale sets the default format, the names in the calendar and the first day of the week. Without it they follow the nearest lang attribute.

German

British English

Show code

date-picker-locale.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-locale-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-60">
        <wds-field-label>German</wds-field-label>
        <wds-date-picker class="w-full" locale="de-DE" value="2026-09-24"></wds-date-picker>
      </wds-field>
      <wds-field class="w-60">
        <wds-field-label>British English</wds-field-label>
        <wds-date-picker class="w-full" locale="en-GB" value="2026-09-24"></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerLocaleDemo {}

Clear and button bar#

clearable adds a clear button to the field; show-button-bar adds “Today” and “Clear” buttons under the calendar (their texts are currently in Polish).

Clearable

Button bar

Show code

date-picker-clearable.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-clearable-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-60">
        <wds-field-label>Clearable</wds-field-label>
        <wds-date-picker class="w-full" clearable value="2026-09-24"></wds-date-picker>
      </wds-field>
      <wds-field class="w-60">
        <wds-field-label>Button bar</wds-field-label>
        <wds-date-picker class="w-full" show-button-bar></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerClearableDemo {}

Range#

mode="range": the value is start and end. The calendar closes after the second date.

Stay

Show code

date-picker-range.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-range-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Stay</wds-field-label>
      <wds-date-picker class="w-full" mode="range" months="2"></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerRangeDemo {}

Presets#

presets adds ready-made choices next to the calendar, counted from today: today, yesterday, tomorrow, last-7-days, last-14-days, last-30-days, last-90-days, this-week, last-week (from first-day), this-month, last-month, this-quarter, last-quarter, this-year, last-year, year-to-date. A choice sets the value and closes the calendar; the current one is highlighted, and one outside min/max is disabled. On phones the presets are a row above the calendar.

Reporting period

Show code

date-picker-presets.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-presets-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Reporting period</wds-field-label>
      <wds-date-picker
        class="w-full"
        mode="range"
        months="2"
        presets="today yesterday last-7-days last-30-days this-month last-month this-year"
      ></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerPresetsDemo {}

Presets for one date#

In the single mode only one-day presets (today, yesterday, tomorrow or your own with value) are shown.

Due date

Show code

date-picker-presets-single.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-presets-single-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Due date</wds-field-label>
      <wds-date-picker class="w-full" presets="today tomorrow"></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerPresetsSingleDemo {}

Custom presets#

As a property presets also takes your own entries: { label, start, end } for a range or { label, value } for a day, mixed with the built-in keys (types WdsDatePickerPreset and WdsDatePickerPresetKey).

Campaign

—

Show code

date-picker-custom-presets.ts

import { Component, signal } from '@angular/core';
import type { WdsDatePickerPreset, WdsDatePickerPresetKey } from '@wds/core/date-picker';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';
import { WDS_FIELD } from '@wds/angular/field';

const year = new Date().getFullYear();

@Component({
  selector: 'app-date-picker-custom-presets-demo',
  imports: [WdsDatePickerComponent, ...WDS_FIELD],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Campaign</wds-field-label>
      <wds-date-picker
        class="w-full"
        mode="range"
        months="2"
        [presets]="presets"
        [start]="start()"
        [end]="end()"
        (wdsChange)="start.set($event.start); end.set($event.end)"
      />
      <wds-field-description>{{ start() ? start() + ' – ' + end() : '—' }}</wds-field-description>
    </wds-field>
  `,
})
export class DatePickerCustomPresetsDemo {
  /** Your own presets: a range with start and end, or a single day with value. Built-in keys can be mixed in. */
  protected readonly presets: (WdsDatePickerPreset | WdsDatePickerPresetKey)[] = [
    { label: 'Spring sale', start: `${year}-03-20`, end: `${year}-04-10` },
    { label: 'Summer sale', start: `${year}-06-21`, end: `${year}-07-15` },
    { label: 'Black Friday', start: `${year}-11-27`, end: `${year}-11-30` },
    'last-30-days',
  ];
  protected readonly start = signal('');
  protected readonly end = signal('');
}

Multiple#

mode="multiple": the calendar stays open and the dates are in values.

Meeting days

Show code

date-picker-multiple.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-multiple-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Meeting days</wds-field-label>
      <wds-date-picker class="w-full" mode="multiple"></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerMultipleDemo {}

Date and time#

time adds hour and minute columns next to the calendar (as in wds-time-picker); the value is a local date and time (2026-09-24T14:30), as in <input type="datetime-local">. Picking a day keeps the popup open for the time; a time picked first applies to today. Works in the single mode; minute-step, seconds and hour-cycle work as in the time picker.

Departure

Departure, 12-hour

Show code

date-picker-date-and-time.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-date-and-time-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-72">
        <wds-field-label>Departure</wds-field-label>
        <wds-date-picker class="w-full" time hour-cycle="24" minute-step="5" value="2026-09-24T14:30"></wds-date-picker>
      </wds-field>
      <wds-field class="w-72">
        <wds-field-label>Departure, 12-hour</wds-field-label>
        <wds-date-picker class="w-full" time hour-cycle="12" minute-step="5" value="2026-09-24T14:30"></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerDateAndTimeDemo {}

Mobile panel#

On screens narrower than 640 px (panel="auto") the calendar opens in a panel at the bottom of the screen: one month, larger days, a “Done” button, and focus straight in the calendar so the on-screen keyboard stays hidden. panel="sheet" (here) always opens the panel, panel="popup" never.

Check-in

Show code

date-picker-mobile-panel.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-mobile-panel-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Check-in</wds-field-label>
      <wds-date-picker class="w-full" panel="sheet" show-button-bar></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerMobilePanelDemo {}

Unavailable dates#

min, max, disabled-days and disabledDates work as in wds-calendar. A typed date that is not available makes the field invalid, with a message in validationMessage.

Appointment

Weekdays within the next 30 days. Value: —

Show code

date-picker-unavailable-dates.ts

import { Component, signal } from '@angular/core';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

/** An ISO date `days` from today (local time). */
function isoFromToday(days: number): string {
  const d = new Date();
  d.setDate(d.getDate() + days);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

@Component({
  selector: 'app-date-picker-unavailable-demo',
  imports: [WdsDatePickerComponent, ...WDS_FIELD],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Appointment</wds-field-label>
      <wds-date-picker
        class="w-full"
        disabled-days="0 6"
        [min]="today"
        [max]="lastDay"
        [disabledDates]="booked"
        [value]="value()"
        (wdsChange)="value.set($event.value)"
      />
      <wds-field-description>Weekdays within the next 30 days. Value: {{ value() || '—' }}</wds-field-description>
    </wds-field>
  `,
})
export class DatePickerUnavailableDemo {
  protected readonly today = isoFromToday(0);
  protected readonly lastDay = isoFromToday(30);
  /** Booked dates are crossed out in the calendar. */
  protected readonly booked = [3, 4, 10, 11].map(isoFromToday);
  protected readonly value = signal('');
}

Month and year#

view="month" picks a month (2026-09) and view="year" a year (2026).

Card expiry

Year of manufacture

Show code

date-picker-month-and-year.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-month-and-year-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-60">
        <wds-field-label>Card expiry</wds-field-label>
        <wds-date-picker class="w-full" view="month"></wds-date-picker>
      </wds-field>
      <wds-field class="w-60">
        <wds-field-label>Year of manufacture</wds-field-label>
        <wds-date-picker class="w-full" view="year"></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerMonthAndYearDemo {}

Week numbers#

show-week shows week numbers in the calendar.

Date

Show code

date-picker-week-numbers.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-week-numbers-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Date</wds-field-label>
      <wds-date-picker class="w-full" show-week></wds-date-picker>
    </wds-field>
  `,
})
export class DatePickerWeekNumbersDemo {}

Invalid#

invalid on wds-field (or on the date picker) shows the error state.

Date

Select a date.

Show code

date-picker-invalid.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldErrorComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-invalid-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsFieldErrorComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs" invalid>
      <wds-field-label>Date</wds-field-label>
      <wds-date-picker class="w-full"></wds-date-picker>
      <wds-field-error>Select a date.</wds-field-error>
    </wds-field>
  `,
})
export class DatePickerInvalidDemo {}

Disabled and read-only#

disabled blocks the field; readonly keeps it focusable but without typing and without the calendar.

Disabled

Read-only

Show code

date-picker-disabled.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-disabled-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsDatePickerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-4">
      <wds-field class="w-60">
        <wds-field-label>Disabled</wds-field-label>
        <wds-date-picker class="w-full" disabled value="2026-09-24"></wds-date-picker>
      </wds-field>
      <wds-field class="w-60">
        <wds-field-label>Read-only</wds-field-label>
        <wds-date-picker class="w-full" readonly value="2026-09-24"></wds-date-picker>
      </wds-field>
    </div>
  `,
})
export class DatePickerDisabledDemo {}

Field#

In wds-field the label and the description become the accessible name and description of the field.

Date of birth

Used to check your age.

Show code

date-picker-field.ts

import { Component } from '@angular/core';
import { WdsFieldComponent, WdsFieldDescriptionComponent, WdsFieldLabelComponent } from '@wds/angular/field';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';

@Component({
  selector: 'app-date-picker-field-demo',
  imports: [WdsFieldComponent, WdsFieldLabelComponent, WdsFieldDescriptionComponent, WdsDatePickerComponent],
  template: `
    <wds-field class="w-full max-w-xs">
      <wds-field-label>Date of birth</wds-field-label>
      <wds-date-picker class="w-full"></wds-date-picker>
      <wds-field-description>Used to check your age.</wds-field-description>
    </wds-field>
  `,
})
export class DatePickerFieldDemo {}

Forms#

Integration with Angular forms. Pick the API your app uses.

Signal forms#

WdsDatePickerField connects wds-date-picker to [formField] (a string). For mode="multiple" use WdsDatePickerMultipleField (string[]) and for mode="range" WdsDatePickerRangeField ({ start, end }).

Show code

date-picker-signal-forms.ts

import { Component, computed, signal } from '@angular/core';
import { FormField, FormRoot, form, required } from '@angular/forms/signals';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsDatePickerField } from '@wds/angular/forms';

@Component({
  selector: 'app-date-picker-signal-forms-demo',
  imports: [WdsDatePickerComponent, ...WDS_FIELD, FormField, FormRoot, WdsButtonComponent, WdsDatePickerField],
  template: `
    <form class="flex w-sm max-w-full flex-col gap-4" [formRoot]="bookingForm">
      <wds-field [invalid]="showCheckInError()">
        <wds-field-label>Check-in date</wds-field-label>
        <wds-date-picker class="w-full" [formField]="bookingForm.checkIn" />
        <wds-field-error [errors]="showCheckInError() ? bookingForm.checkIn().errors() : []" />
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class DatePickerSignalFormsDemo {
  protected readonly booking = signal({ checkIn: '' });
  protected readonly submitted = signal('—');

  protected readonly bookingForm = form(
    this.booking,
    (path) => {
      required(path.checkIn, { message: 'Select a check-in date.' });
    },
    {
      submission: {
        action: async (form) => {
          this.submitted.set(JSON.stringify(form().value()));
        },
      },
    }
  );

  /** The error appears after the user leaves the field or submits the form. */
  protected readonly showCheckInError = computed(() => this.bookingForm.checkIn().touched() && this.bookingForm.checkIn().invalid());
}

Template-driven#

WdsDatePickerValueAccessor makes ngModel work on wds-date-picker; the value type follows mode (string, string[] or { start, end }).

Show code

date-picker-template-driven.ts

import { Component, signal } from '@angular/core';
import { FormsModule, type NgForm } from '@angular/forms';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsDatePickerValueAccessor } from '@wds/angular/forms';

@Component({
  selector: 'app-date-picker-template-driven-demo',
  imports: [WdsDatePickerComponent, ...WDS_FIELD, FormsModule, WdsButtonComponent, WdsDatePickerValueAccessor],
  template: `
    <form #bookingForm="ngForm" class="flex w-sm max-w-full flex-col gap-4" (ngSubmit)="save(bookingForm)">
      <wds-field [invalid]="!!checkIn.invalid && !!checkIn.touched">
        <wds-field-label>Check-in date</wds-field-label>
        <wds-date-picker #checkIn="ngModel" class="w-full" name="checkIn" [(ngModel)]="booking.checkIn" required />
        @if (checkIn.invalid && checkIn.touched) {
          <wds-field-error>Select a check-in date.</wds-field-error>
        }
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class DatePickerTemplateDrivenDemo {
  protected readonly booking = { checkIn: '' };
  protected readonly submitted = signal('—');

  protected save(form: NgForm): void {
    if (form.invalid) {
      form.form.markAllAsTouched();
      return;
    }
    this.submitted.set(JSON.stringify(form.value));
  }
}

Reactive forms#

The same WdsDatePickerValueAccessor works with formControl and formControlName.

Show code

date-picker-reactive-forms.ts

import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDatePickerComponent } from '@wds/angular/date-picker';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsDatePickerValueAccessor } from '@wds/angular/forms';

@Component({
  selector: 'app-date-picker-reactive-forms-demo',
  imports: [WdsDatePickerComponent, ...WDS_FIELD, ReactiveFormsModule, WdsButtonComponent, WdsDatePickerValueAccessor],
  template: `
    <form class="flex w-sm max-w-full flex-col gap-4" [formGroup]="bookingForm" (ngSubmit)="save()">
      <wds-field [invalid]="checkIn.invalid && checkIn.touched">
        <wds-field-label>Check-in date</wds-field-label>
        <wds-date-picker class="w-full" formControlName="checkIn" />
        @if (checkIn.invalid && checkIn.touched) {
          <wds-field-error>Select a check-in date.</wds-field-error>
        }
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class DatePickerReactiveFormsDemo {
  protected readonly bookingForm = new FormGroup({
    checkIn: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
  });
  protected readonly checkIn = this.bookingForm.controls.checkIn;
  protected readonly submitted = signal('—');

  protected save(): void {
    if (this.bookingForm.invalid) {
      this.bookingForm.markAllAsTouched();
      return;
    }
    this.submitted.set(JSON.stringify(this.bookingForm.getRawValue()));
  }
}

API References#

wds-date-picker#

A date field with a calendar in a popup. The date can be typed (in the format of the page language, e.g. mm/dd/yyyy, or format) or selected in the calendar. The value is ISO text (2026-09-24), as in <input type="date">. A form control: name submits the date (in multiple mode each date separately, in range the start and the end); required, min and max validate as in a native field, and text that is not a valid date gives badInput. With time (the single mode) hour and minute columns sit next to the calendar and the value is a local date and time (2026-09-24T14:30), as in <input type="datetime-local">. On phones the calendar opens in a panel at the bottom of the screen (panel). Keyboard: ↓ (or Alt+↓) in the field opens the calendar with focus on the date; Escape closes it and returns to the field.

Attributes

Attribute	Type	Default	Description
mode	WdsCalendarMode	'single'	`single` – one date, `multiple` – several dates, `range` – a range from–to.
view	WdsCalendarView	'date'	Smallest unit of selection: `date` (a day), `month` (`2026-09`) or `year` (`2026`).
value	string	''	`single` mode: the selected date (ISO), with `time` the date and time (`2026-09-24T14:30`).
values	string[]		`multiple` mode: the selected dates (ISO). In HTML a space-separated list.
start	string	''	`range` mode: the start of the range (ISO).
end	string	''	`range` mode: the end of the range (ISO).
min	string	''	The earliest allowed date (ISO).
max	string	''	The latest allowed date (ISO).
disabled-dates.disabledDates	string[]		Unavailable dates. In HTML a space-separated list.
disabled-days.disabledDays	number[]	[]	Unavailable days of the week: 0 = Sunday … 6 = Saturday.
months	number	1	Number of months in the calendar.
first-day.firstDay	number \| undefined		First day of the week: 0 = Sunday, 1 = Monday. Defaults to the language.
show-week.showWeek	boolean	false	Shows week numbers.
hide-outside-days.hideOutsideDays	boolean	false	Hides days of the adjacent months.
locale	string	''	Language (e.g. `en-US`). Defaults to the nearest `lang` attribute.
format	string	''	Format of the field, e.g. `dd.MM.yyyy`, `MM/dd/yyyy`, `yyyy-MM-dd`. Defaults to the language.
placeholder	string	''	Placeholder of the empty field. Defaults to the format, e.g. `mm/dd/yyyy`.
name	string	''	Field name in a form.
required	boolean	false	A date is required (`valueMissing` when empty).
disabled	boolean	false	Disables the field.
readonly	boolean	false	Read-only: no typing and no calendar.
invalid	boolean	false	Error state (e.g. from the app's validation).
clearable	boolean	false	A clear button in the field when a date is selected.
show-button-bar.showButtonBar	boolean	false	A bar with the "Today" and "Clear" buttons under the calendar.
time	boolean	false	Adds hour and minute columns (the `single` mode with `view="date"`); the value is `2026-09-24T14:30`.
minute-step.minuteStep	number	1	With `time`: minutes between the options of the minute column (e.g. 15).
seconds	boolean	false	With `time`: adds a seconds column (`2026-09-24T14:30:15`).
hour-cycle.hourCycle	12 \| 24 \| undefined		With `time`: `12` or `24`-hour clock. Defaults to the language.
panel	WdsPickerPanel	'auto'	Where the calendar opens: `auto` (a popup, on phones a panel at the bottom), `popup` or `sheet`.
presets	(WdsDatePickerPresetKey \| WdsDatePickerPreset)[]	[]	Ready-made choices next to the calendar, e.g. `presets="today last-7-days this-month"`. Built-in keys are counted from today: `today`, `yesterday`, `tomorrow`, `last-7-days`, `last-14-days`, `last-30-days`, `last-90-days`, `this-week`, `last-week`, `this-month`, `last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`. As a property it also takes your own `{ label, value }` or `{ label, start, end }`. Ranges show in `range` mode, single days in `single` and `range` mode.
open	boolean	false	Whether the calendar is open.

Properties

Property	Description
isDateDisabled((date: string) => boolean) \| null	Custom rule for unavailable dates (e.g. dates from an API).
dayInfo((date: string) => WdsCalendarDayInfo \| string \| null \| undefined) \| null	Extra content of each day in the calendar (text under the number, a dot), as in `wds-calendar`.

Events

Event	Description
wds-changeCustomEvent<WdsDatePickerChangeDetail>	The user changes the date (calendar, typing, clearing).
wds-open-changeCustomEvent<WdsDatePickerOpenChangeDetail>	The user opens or closes the calendar.

Methods

Method	Description
show()	Opens the calendar.
close()	Closes the calendar.
focus(options?: FocusOptions)
formResetCallback()
formDisabledCallback(disabled: boolean)
checkValidity()	Returns `true` when the value is valid; otherwise fires `invalid` on the element.
reportValidity()	Like `checkValidity()`, and shows the browser validation bubble when the value is invalid.
setCustomValidity(message: string)	Sets a custom validation error (an empty string clears it), like `input.setCustomValidity()`.

CSS parts (::part)

Part	Description
field	The field border.
input	The native `<input>`.
clear	The clear button.
trigger	The button with the calendar icon.
popup	The popup with the calendar.
calendar	The `wds-calendar` in the popup.
footer	The bar with the "Today" and "Clear" buttons.
presets	The column of presets next to the calendar.
preset	A single preset button.
time	The hour and minute columns (`time`).
time-option	A single hour, minute, second or AM/PM (`time`).

CSS custom properties

Property	Description
--wds-date-picker-width	Width of the field.

Accessibility#

The text field has role="combobox" with aria-haspopup="dialog" and aria-expanded. Give it a name with wds-field-label or aria-label; the fallback name (Data) is in Polish.

The calendar opens in a popup with role="dialog"; inside it works like wds-calendar (grid, full dates as cell names, live region for the month).

The calendar button, the clear button, the popup and the validation messages have built-in names and texts that are currently in Polish.

The presets are a group named “Presets”; each is a toggle button with aria-pressed on the current one.

invalid, required and a typed text that is not a date set aria-invalid / aria-required. In a form the date is submitted under name (each date in multiple, start and end in range).

Keyboard support#

Key	Function
ArrowDownAlt + ArrowDown	In the field: opens the calendar with focus on the selected date (or today).
Enter	In the field: accepts the typed date and closes the calendar.
Escape	Closes the calendar and returns focus to the field. In the months or years view it first goes back a level.
Tab	Moving focus out of the date picker accepts the typed text and closes the calendar.
ArrowsPageUpPageDownHomeEndEnterSpace	In the calendar: as in `wds-calendar`.
Shift + Tab↑↓	With `presets`: Shift+Tab from the calendar (past its header buttons) reaches the presets, ↑ and ↓ move between them, and Enter or Space chooses one.
Tab	With `time`: from the calendar to the hour and minute columns, which work as in `wds-time-picker`.

Usage#

Examples#

Default#

Format#

Locale#

Clear and button bar#

Range#

Presets#

Presets for one date#

Custom presets#

Multiple#

Date and time#

Mobile panel#

Unavailable dates#

Month and year#

Week numbers#

Invalid#

Disabled and read-only#

Field#

Forms#

Signal forms#

Template-driven#

Reactive forms#

API References#

wds-date-picker#

Attributes

Properties

Events

Methods

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#