Appearance

Bib Placement

The bib position can be customized with placement, offset, flip, autoPlacement, and shift attributes.

Datepicker Headline bottom-start with 20px offset and noFlip Choose a date

Datepicker Headline bottom-start with 20px offset and flip Choose a date

Datepicker Headline right with 20px offset, noFlip and autoPlacement Choose a date

Range bottom-start with 20px offset, noFlip and shift enabled

Close Calendar Datepicker Range Headline Departure Return Departure Return

See code

<div style="width: 400px">
  <auro-datepicker offset="20" placement="bottom-start" noFlip>
    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
    <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
  </auro-datepicker>
  <br/>
  <auro-datepicker offset="20" placement="bottom-start">
    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
    <span slot="fromLabel">bottom-start with 20px offset and flip</span>
    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
  </auro-datepicker>
  <br/>
  <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
    <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
  </auro-datepicker>
</div>
<div style="width: 600px; padding-top: 1em;">
  <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
  <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="2025-07-08">
    <span slot="ariaLabel.bib.close">Close Calendar</span>
    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
    <span slot="fromLabel">Departure</span>
    <span slot="toLabel">Return</span>
    <span slot="bib.fullscreen.fromLabel">Departure</span>
    <span slot="bib.fullscreen.toLabel">Return</span>
  </auro-datepicker>
</div>

CSS Shadow Parts

CSS Shadow Parts allow you to style elements inside a web component's shadow DOM using the ::part() pseudo-element. The following parts are exposed by <auro-datepicker>.

Part	Description
`dropdown`	The outer dropdown container.
`trigger`	The trigger content container.
`input`	The date input element(s).
`calendarWrapper`	The calendar bib sizing container.
`calendar`	The calendar element.
`helpTextSpan`	The help text container wrapper.
`helpText`	The help text element.

CSS Parts Example This datepicker has custom styles applied via CSS Shadow Parts. Select Date Choose a date

See code

<style>
  auro-datepicker.css-parts-demo::part(trigger) {
    border-color: orange;
  }
  auro-datepicker.css-parts-demo::part(helpText) {
    color: green;
  }
  auro-datepicker.css-parts-demo::part(calendarWrapper) {
    max-height: 400px;
  }
</style>
<auro-datepicker class="css-parts-demo">
  <span slot="fromLabel">CSS Parts Example</span>
  <span slot="helpText">This datepicker has custom styles applied via CSS Shadow Parts.</span>
  <span slot="bib.fullscreen.headline">Select Date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Fullscreen Breakpoint

The fullscreenBreakpoint attribute defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. Supported values are xs, sm, md, lg, xl, and disabled. The default value is sm.

Close Calendar Datepicker Headline Choose a date Choose a date

See code

<auro-datepicker fullscreenBreakpoint="lg">
  <span slot="ariaLabel.bib.close">Close Calendar</span>
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Light vs. Dark Background

The appearance attribute defines whether the component renders on lighter or darker backgrounds. Supported values are default and inverse. The default value is default.

Close Calendar Datepicker Headline Choose a date Choose a date

See code

<auro-datepicker>
  <span slot="ariaLabel.bib.close">Close Calendar</span>
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Close Calendar Datepicker Headline Choose a date Choose a date

See code

<auro-datepicker appearance="inverse">
  <span slot="ariaLabel.bib.close">Close Calendar</span>
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Localization

The component supports complete localization, including visible strings, screen reader announcements, and locale-based date formatting.

Trigger

Visible Strings

The visible strings rendered in the input, trigger, and fullscreen bib are not derived from locale — they are projected through named slots so each language can supply its own translation. Pass a <span> with the matching slot attribute for every string you need to localize.

  <auro-datepicker>
+   <span slot="fromLabel">Abreisedatum</span>
+   <span slot="helpText">Wählen Sie ein Datum</span>
+   <span slot="optionalFromLabel">(freiwillig)</span>
+   <span slot="bib.fullscreen.headline">Datum auswählen</span>
+   <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
  </auro-datepicker>

Calendar

Visible Strings

By default, the calendar weekday names rendered above the day grid and the month names rendered in the calendar header are derived from the active locale using the browser's Intl API, so they update automatically when locale changes. Use the monthNames attribute to override the derived month names — for example, to supply a translation the browser does not produce or to support a locale the browser does not recognize.

- <auro-datepicker>
+ <auro-datepicker monthNames='["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"]'>
    <span slot="fromLabel">Salida</span>
    <span slot="helpText">Seleccione un rango de fechas</span>
    <span slot="optionalFromLabel">(opcional)</span>
  </auro-datepicker>

The following live example sets monthNames imperatively on an es-MX picker:

Salida Regreso Seleccione un rango de fechas (opcional) (opcional) Seleccione fechas Salida Regreso

See code

<auro-datepicker
  range
  monthNames='["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"]'
  locale="es-MX"
  rangeLabelStart="fecha de salida"
  rangeLabelEnd="fecha de regreso"
  rangeLabelBeforeRange="antes de la salida"
  rangeLabelInRange="entre vuelos"
  rangeLabelAfterRange="después del regreso"
  rangeLabelEndPreview="previsualizando fecha de regreso"
  navLabelPrevMonth="Ir al mes anterior"
  navLabelNextMonth="Ir al mes siguiente"
  calendarGridLabel="Días del mes del calendario"
  id="localizationExample">
  <span slot="fromLabel">Salida</span>
  <span slot="toLabel">Regreso</span>
  <span slot="helpText">Seleccione un rango de fechas</span>
  <span slot="optionalFromLabel">(opcional)</span>
  <span slot="optionalToLabel">(opcional)</span>
  <span slot="bib.fullscreen.headline">Seleccione fechas</span>
  <span slot="bib.fullscreen.fromLabel">Salida</span>
  <span slot="bib.fullscreen.toLabel">Regreso</span>
</auro-datepicker>

Screen Reader Strings

Assistive-technology announcements — range descriptors (rangeLabelStart, rangeLabelEnd, rangeLabelEndPreview, rangeLabelBeforeRange, rangeLabelInRange, rangeLabelAfterRange), month navigation labels (navLabelPrevMonth, navLabelNextMonth), and the calendar grid label (calendarGridLabel) — are exposed as individual attributes so they can be translated independently of the visible UI. These strings are not derived from locale; supply translated values for every language you support.

  <auro-datepicker
    locale="de-DE"
    range
+   rangeLabelStart="Startdatum"
+   rangeLabelEnd="Enddatum"
+   rangeLabelBeforeRange="vor dem Zeitraum"
+   rangeLabelInRange="im Zeitraum"
+   rangeLabelAfterRange="nach dem Zeitraum"
+   rangeLabelEndPreview="Vorschau Enddatum"
+   navLabelPrevMonth="Vorheriger Monat"
+   navLabelNextMonth="Nächster Monat"
+   calendarGridLabel="Kalendertage des Monats">
    <span slot="fromLabel">Abreise</span>
    <span slot="toLabel">Rückkehr</span>
    <span slot="helpText">Wählen Sie einen Zeitraum</span>
    <span slot="optionalFromLabel">(freiwillig)</span>
    <span slot="optionalToLabel">(freiwillig)</span>
  </auro-datepicker>

Date Formatting

The locale attribute drives the date format used by the input and the calendar. Setting locale automatically selects the regional format (for example en-US → mm/dd/yyyy, de-DE → dd.mm.yyyy, ja-JP → yyyy/mm/dd), derived from the browser's Intl API, so format does not need to be set manually.

- <auro-datepicker>
+ <auro-datepicker locale="de-DE">
    <span slot="fromLabel">Deutsches Datum</span>
    <span slot="helpText">Hilfetext</span>
    <span slot="optionalFromLabel">(freiwillig)</span>
  </auro-datepicker>

If no locale attribute is present, the component walks up the DOM looking for the nearest ancestor with a data-locale attribute; if none is found, it defaults to en-US.

+ <div data-locale="ja-JP">
    <auro-datepicker>
      <span slot="fromLabel">継承された ja-JP 日付形式</span>
      <span slot="helpText">ヘルプテキスト</span>
      <span slot="optionalFromLabel">（任意）</span>
    </auro-datepicker>
+ </div>

If format is set alongside locale, format always wins.

  <auro-datepicker
+   locale="de-DE"
+   format="mm/dd/yyyy">
    <span slot="fromLabel">Deutsches Datum mit mm/dd/yyyy-Format</span>
    <span slot="helpText">Hilfetext</span>
    <span slot="optionalFromLabel">(freiwillig)</span>
  </auro-datepicker>

The following live example shows several locale configurations in action:

de-DE

Abreisedatum Rückkehrdatum Hilfetext (freiwillig) (freiwillig) Datum auswählen Abreisedatum Rückkehrdatum

zh-CN

出发日期返回日期帮助文本（可选）（可选）选择日期出发日期返回日期

Inherited de-DE (via data-locale)

Abreisedatum (geerbt aus `data-locale="de-DE"`) Rückkehrdatum Hilfetext (freiwillig) (freiwillig) Datum auswählen Abreisedatum Rückkehrdatum

ja-JP with explicit format="mm/dd/yyyy"

出発日帰国日ヘルプテキスト（任意）（任意）日付を選択出発日帰国日

See code

<div data-locale="de-DE">
  <p class="body-sm"><strong>de-DE</strong></p>
  <auro-datepicker
    locale="de-DE"
    range
    rangeLabelStart="Startdatum"
    rangeLabelEnd="Enddatum"
    rangeLabelBeforeRange="vor dem Zeitraum"
    rangeLabelInRange="im Zeitraum"
    rangeLabelAfterRange="nach dem Zeitraum"
    rangeLabelEndPreview="Vorschau Enddatum"
    navLabelPrevMonth="Vorheriger Monat"
    navLabelNextMonth="Nächster Monat"
    calendarGridLabel="Kalendertage des Monats">
    <span slot="fromLabel">Abreisedatum</span>
    <span slot="toLabel">Rückkehrdatum</span>
    <span slot="helpText">Hilfetext</span>
    <span slot="optionalFromLabel">(freiwillig)</span>
    <span slot="optionalToLabel">(freiwillig)</span>
    <span slot="bib.fullscreen.headline">Datum auswählen</span>
    <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
    <span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
  </auro-datepicker>
  <p class="body-sm"><strong>zh-CN</strong></p>
  <auro-datepicker
    locale="zh-CN"
    range
    rangeLabelStart="开始日期"
    rangeLabelEnd="结束日期"
    rangeLabelBeforeRange="在此期间之前"
    rangeLabelInRange="在此期间内"
    rangeLabelAfterRange="在此期间之后"
    rangeLabelEndPreview="预览结束日期"
    navLabelPrevMonth="上个月"
    navLabelNextMonth="下个月"
    calendarGridLabel="本月的日历天数">
    <span slot="fromLabel">出发日期</span>
    <span slot="toLabel">返回日期</span>
    <span slot="helpText">帮助文本</span>
    <span slot="optionalFromLabel">（可选）</span>
    <span slot="optionalToLabel">（可选）</span>
    <span slot="bib.fullscreen.headline">选择日期</span>
    <span slot="bib.fullscreen.fromLabel">出发日期</span>
    <span slot="bib.fullscreen.toLabel">返回日期</span>
  </auro-datepicker>
  <p class="body-sm"><strong>Inherited de-DE (via <code>data-locale</code>)</strong></p>
  <auro-datepicker
    range
    rangeLabelStart="Startdatum"
    rangeLabelEnd="Enddatum"
    rangeLabelBeforeRange="vor dem Zeitraum"
    rangeLabelInRange="im Zeitraum"
    rangeLabelAfterRange="nach dem Zeitraum"
    rangeLabelEndPreview="Vorschau Enddatum"
    navLabelPrevMonth="Vorheriger Monat"
    navLabelNextMonth="Nächster Monat"
    calendarGridLabel="Kalendertage des Monats">
    <span slot="fromLabel">Abreisedatum (geerbt aus `data-locale="de-DE"`)</span>
    <span slot="toLabel">Rückkehrdatum</span>
    <span slot="helpText">Hilfetext</span>
    <span slot="optionalFromLabel">(freiwillig)</span>
    <span slot="optionalToLabel">(freiwillig)</span>
    <span slot="bib.fullscreen.headline">Datum auswählen</span>
    <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
    <span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
  </auro-datepicker>
  <p class="body-sm"><strong>ja-JP with explicit <code>format="mm/dd/yyyy"</code></strong></p>
  <auro-datepicker
    locale="ja-JP"
    format="mm/dd/yyyy"
    range
    rangeLabelStart="開始日"
    rangeLabelEnd="終了日"
    rangeLabelBeforeRange="この期間の前"
    rangeLabelInRange="この期間内"
    rangeLabelAfterRange="この期間の後"
    rangeLabelEndPreview="終了日プレビュー"
    navLabelPrevMonth="前の月"
    navLabelNextMonth="次の月"
    calendarGridLabel="カレンダーの日付">
    <span slot="fromLabel">出発日</span>
    <span slot="toLabel">帰国日</span>
    <span slot="helpText">ヘルプテキスト</span>
    <span slot="optionalFromLabel">（任意）</span>
    <span slot="optionalToLabel">（任意）</span>
    <span slot="bib.fullscreen.headline">日付を選択</span>
    <span slot="bib.fullscreen.fromLabel">出発日</span>
    <span slot="bib.fullscreen.toLabel">帰国日</span>
  </auro-datepicker>
</div>

Shape, Size & Layout

The shape, size and layout attributes work in collaboration to control the overall architecture of the component.

See the Design page for a detailed breakdown.

Tokens

The component may be restyled by changing the values of the following token(s) for the datepicker, dropdown, and input

Datepicker

/* stylelint-disable color-function-notation */

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;

:host(:not([ondark])),
:host(:not([appearance="inverse"])) {
  // datepicker
  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
  --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-datepicker-outline-color: transparent;

  // calendar
  --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
  --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-calendar-nav-btn-border-color: transparent;
  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
  --ds-auro-calendar-nav-btn-container-color: transparent;
  --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
  --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-calendar-cell-border-color: transparent;
  --ds-auro-calendar-cell-container-color: transparent;
  --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
  --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
}

:host([ondark]),
:host([appearance="inverse"]) {
  // datepicker
  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-datepicker-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
  --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-datepicker-outline-color: transparent;

  // calendar
  --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
  --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-calendar-nav-btn-border-color: transparent;
  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
  --ds-auro-calendar-nav-btn-container-color: transparent;
  --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
  --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-calendar-cell-border-color: transparent;
  --ds-auro-calendar-cell-container-color: transparent;
  --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
  --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
}

Dropdown

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;

:host(:not([ondark])),
:host(:not([appearance="inverse"])) {
  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-dropdown-trigger-outline-color: transparent;
  --ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{vac.$ds-elevation-200});
  --ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
}

:host([ondark]),
:host([appearance="inverse"]) {
  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
  --ds-auro-dropdown-trigger-outline-color: transparent;
  --ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{vac.$ds-elevation-200});
  --ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
}

Example

The following example demonstrates overriding all available datepicker, dropdown, input, and calendar tokens.

Departure Return Select Dates Departure Return

See code

<style>
  auro-datepicker.token-demo {
    /* Datepicker tokens */
    --ds-auro-datepicker-range-input-divider-color: mediumpurple;
    --ds-auro-datepicker-label-text-color: darkslateblue;
    --ds-auro-datepicker-outline-color: transparent;
    /* Dropdown tokens */
    --ds-auro-dropdown-trigger-border-color: mediumpurple;
    --ds-auro-dropdown-trigger-background-color: lavender;
    --ds-auro-dropdown-trigger-hover-background-color: lavender;
    --ds-auro-dropdown-trigger-container-color: lavender;
    --ds-auro-dropdown-trigger-text-color: darkslateblue;
    --ds-auro-dropdown-trigger-outline-color: transparent;
    --ds-auro-dropdownbib-boxshadow-color: rgba(100, 100, 200, 0.3);
    --ds-auro-dropdownbib-background-color: ghostwhite;
    --ds-auro-dropdownbib-container-color: ghostwhite;
    --ds-auro-dropdownbib-text-color: darkslateblue;
    /* Input tokens */
    --ds-auro-input-border-color: mediumpurple;
    --ds-auro-input-container-color: lavender;
    --ds-auro-input-caret-color: mediumpurple;
    --ds-auro-input-label-text-color: darkslateblue;
    --ds-auro-input-placeholder-text-color: slategray;
    --ds-auro-input-text-color: darkslateblue;
    /* Calendar tokens */
    --ds-auro-calendar-nav-btn-chevron-color: mediumpurple;
    --ds-auro-calendar-month-header-color: darkslateblue;
    --ds-auro-calendar-month-container-color: ghostwhite;
    --ds-auro-calendar-month-divider-color: mediumpurple;
    --ds-auro-calendar-cell-text-color: darkslateblue;
    --ds-auro-calendar-cell-in-range-color: lavender;
    --ds-auro-calendar-cell-border-color: transparent;
    --ds-auro-calendar-cell-container-color: transparent;
  }
</style>
<auro-datepicker class="token-demo" range>
  <span slot="fromLabel">Departure</span>
  <span slot="toLabel">Return</span>
  <span slot="bib.fullscreen.headline">Select Dates</span>
  <span slot="bib.fullscreen.fromLabel">Departure</span>
  <span slot="bib.fullscreen.toLabel">Return</span>
</auro-datepicker>

Input

/* stylelint-disable custom-property-empty-line-before */

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;

:host(:not([ondark])),
:host(:not([appearance="inverse"])) {
  --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});

  --ds-auro-input-outline-color: transparent;
}

:host([ondark]),
:host([appearance="inverse"]) {
  --ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
  --ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});

  --ds-auro-input-outline-color: transparent;
}

Behavior

Calendar Focus Date

Use the calendarFocusDate attribute to control which month the calendar first renders. When set alongside value and valueEnd, calendarFocusDate takes precedence for the visible month.

calendarFocusDate Example Departure Return Departure Return

See code

<auro-datepicker range value="2026-06-15" valueEnd="2026-06-22" calendarFocusDate="2026-12-01">
  <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
  <span slot="fromLabel">Departure</span>
  <span slot="toLabel">Return</span>
  <span slot="bib.fullscreen.fromLabel">Departure</span>
  <span slot="bib.fullscreen.toLabel">Return</span>
</auro-datepicker>

Custom Validation

Use the validity attribute with a custom error message to provide specific feedback.

validity Example Choose a date Choose a date

See code

<auro-datepicker required setCustomValidityValueMissing="Please select a departure date.">
  <span slot="bib.fullscreen.headline">validity Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Disable Component

Use the disabled attribute to render the datepicker in a non-interactive state.

Choose a date Choose a date

See code

<auro-datepicker disabled>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Force Error State

Use the error attribute to force the component into an error state with a custom message.

Set Error

Remove Error

Error Example Choose a date Choose a date

See code

<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
<br />
<auro-datepicker error="Custom error message" id="errorExample">
  <span slot="bib.fullscreen.headline">Error Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Input Mode

The inputmode attribute controls which virtual keyboard layout is presented on mobile devices.

Datepicker Headline Choose a date Choose a date

See code

<auro-datepicker inputmode="numeric">
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Min/Max Date

Use the minDate and maxDate attributes to constrain the selectable date range.

minDate Example Choose a date - minDate Choose a date

See code

<auro-datepicker minDate="2028-03-25" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
  <span slot="bib.fullscreen.headline">minDate Example</span>
  <span slot="fromLabel">Choose a date - minDate</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

maxDate Example Choose a date - maxDate Choose a date

See code

<auro-datepicker maxDate="2023-03-25" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
  <span slot="bib.fullscreen.headline">maxDate Example</span>
  <span slot="fromLabel">Choose a date - maxDate</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

No Validation

Use the noValidate attribute to disable all validation on the component.

noValidate Example Choose a date Choose a date

See code

<auro-datepicker required noValidate>
  <span slot="bib.fullscreen.headline">noValidate Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

Require Selection

Use the required attribute to require a date selection before form submission.

Required Example Choose a date Choose a date

Required Example Departure Return Departure Return

See code

<auro-datepicker required>
  <span slot="bib.fullscreen.headline">Required Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>
<br />
<auro-datepicker required range>
  <span slot="bib.fullscreen.headline">Required Example</span>
  <span slot="fromLabel">Departure</span>
  <span slot="toLabel">Return</span>
  <span slot="bib.fullscreen.fromLabel">Departure</span>
  <span slot="bib.fullscreen.toLabel">Return</span>
</auro-datepicker>