The dt-datepicker can be used to select a date with (or without) a time.

<h2>Full datepicker</h2>
<dt-datepicker
  [startAt]="startAt"
  [disabled]="isDatepickerDisabled"
  [isTimeEnabled]="isDatepickerTimeEnabled"
  [showTodayButton]="showTodayButton"
></dt-datepicker>
<dt-checkbox [(ngModel)]="isDatepickerDisabled">Disabled</dt-checkbox>
<dt-checkbox [(ngModel)]="isDatepickerTimeEnabled"
  >Enabled Time Mode</dt-checkbox
>
<dt-checkbox [(ngModel)]="showTodayButton">Enable Today Button</dt-checkbox>
<h2>Calendar</h2>
<dt-calendar
  [startAt]="startAt"
  [showTodayButton]="showTodayButton"
></dt-calendar>
<h2>Calendar body only</h2>
<dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
<h2>Timepicker</h2>
<dt-timepicker [disabled]="isTimepickerDisabled"></dt-timepicker>
<dt-checkbox [(ngModel)]="isTimepickerDisabled">Disabled</dt-checkbox>

Initialization

In order to use the datepicker in your template you need the <dt-datepicker> element. Similarly, you can also use the <dt-calendar>, <dt-calendar-body>, as well as <dt-timepicker> elements individually in your template.

Imports

You have to import the DtDatepickerModule to use the dt-datepicker. The datepicker works by default with the DtNativeDateAdapter, which is based off the functionality available in JavaScript's native Date object. This is limited when it comes to setting the parse format. Therefore, if necessary, a custom DateAdapter can be implemented in order to handle the formatting/parsing library of your choice.

import { NgModule } from '@angular/core';
import { DtDatepickerModule } from '@dynatrace/barista-components/experimental/datepicker';

@NgModule({
  imports: [DtDatepickerModule],
})
class MyModule {}

Also, in order to enable dark mode, the DtThemingModule has to be imported and DT_OVERLAY_THEMING_CONFIG needs to be provided, such as:

import { NgModule } from '@angular/core';
import { DtDatepickerModule } from '@dynatrace/barista-components/experimental/datepicker';
import {
  DT_DEFAULT_DARK_THEMING_CONFIG,
  DT_OVERLAY_THEMING_CONFIG,
} from '@dynatrace/barista-components/core';

@NgModule({
  imports: [DtDatepickerModule, DtThemingModule],
   providers: [
    {
      provide: DT_OVERLAY_THEMING_CONFIG,
      useValue: DT_DEFAULT_DARK_THEMING_CONFIG,
    },
})
class MyModule {}

Inputs

Datepicker

Name Type Default Description
id string null The datepicker id.
value T | null null The selected date.
startAt T | null null The date to open the calendar to initially. Is ignored if selected is set. Defaults to today's date internally for display only.
disabled boolean false Whether the datepicker is disabled.
isTimeEnabled boolean false Whether or not the time mode is enabled, so that the time input fields are displayed as well.
showTodayButton boolean false Whether or not the today button is shown.
tabIndex number 0 The element's tab index.

Calendar

Name Type Default Description
selected T | null null The selected date.
startAt T | null null A date representing the period (month or year) to start the calendar with.
minDate T | null null The minimum valid date.
maxDate T | null null The maximum valid date.
showTodayButton boolean false Whether or not the today button is shown.

Calendar Body

Name Type Default Description
activeDate T today The date to display in this month view (everything other than the month and year is ignored).
startAt T | null null A date representing the period (month or year) to start the calendar with.
minDate T | null null The minimum valid date.
maxDate T | null null The maximum valid date.
dateFilter (date: T) => boolean null Function used to filter whether a date is selectable or not.
ariaLabelledby string null Used for the aria-labelledby and aria-describedby properties of the calendar body. If not provided, the month and year are used as label and description.

Outputs

Calendar

Name Type Description
selectedChange EventEmitter<T> Emits when the currently selected date changes.

Calendar Body

Name Type Description
selectedChange EventEmitter<T> Emits when the currently selected date changes.
activeDateChange EventEmitter<T> Emits when a date is activated.

Properties

Datepicker

Name Type Description
panelOpen boolean Returns the open or closed panel state.

Calendar

Name Type Description
activeDate boolean Returns the active date.

Methods

The following methods are on the DtDatepicker class:

Name Description Return value
open Opens the datepicker void
close Closes the datepicker void
toggle Toggles the datepicker void

Dark Theme

<div dtTheme=":dark" class="dt-example-dark">
  <h2>Full Dark Mode Datepicker</h2>
  <dt-datepicker
    [startAt]="startAt"
    [disabled]="isDatepickerDisabled"
    [isTimeEnabled]="isDatepickerTimeEnabled"
    [showTodayButton]="showTodayButton"
  ></dt-datepicker>
  <dt-checkbox [(ngModel)]="isDatepickerDisabled">Disabled</dt-checkbox>
  <dt-checkbox [(ngModel)]="isDatepickerTimeEnabled"
    >Enabled Time Mode</dt-checkbox
  >
  <dt-checkbox [(ngModel)]="showTodayButton">Enable Today Button</dt-checkbox>
  <h2>Dark Mode Calendar</h2>
  <dt-calendar
    [startAt]="startAt"
    [showTodayButton]="showTodayButton"
  ></dt-calendar>
  <h2>Dark Mode Calendar Body Only</h2>
  <dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
  <h2>Dark Mode Timepicker</h2>
  <dt-timepicker [disabled]="isTimepickerDisabled"></dt-timepicker>
  <dt-checkbox [(ngModel)]="isTimepickerDisabled">Disabled</dt-checkbox>
</div>

Calendar with limited date range

<dt-checkbox [(ngModel)]="showTodayButton"
  >Enable Calendar Today Button</dt-checkbox
>
<div class="dt-limit-wrapper">
  <div>Minimum date: {{ formattedMinDate }}</div>
  <div>Maximum date: {{ formattedMaxDate }}</div>
  <dt-datepicker
    #datepickerMinDate
    [startAt]="minDate"
    [isTimeEnabled]="false"
    [showTodayButton]="showTodayButton"
  ></dt-datepicker>
  <dt-datepicker
    #datepickerMaxDate
    [startAt]="maxDate"
    [isTimeEnabled]="false"
    [showTodayButton]="showTodayButton"
  ></dt-datepicker>
</div>
<dt-calendar
  [startAt]="startAt"
  [minDate]="datepickerMinDate.value || minDate"
  [maxDate]="datepickerMaxDate.value || maxDate"
  [showTodayButton]="showTodayButton"
></dt-calendar>

Timepicker with limited hour or minutes ranges

<dt-form-field>
  <dt-label>Minimum hour: {{ minHour }}</dt-label>
  <input dtInput type="text" [(ngModel)]="minHour" />
</dt-form-field>
<dt-form-field>
  <dt-label>Maximum hour: {{ maxHour }}</dt-label>
  <input dtInput type="text" [(ngModel)]="maxHour" />
</dt-form-field>
<dt-form-field>
  <dt-label>Minimum minute: {{ minMinute }}</dt-label>
  <input dtInput type="text" [(ngModel)]="minMinute" />
</dt-form-field>
<dt-form-field>
  <dt-label>Maximum minute: {{ maxMinute }}</dt-label>
  <input dtInput type="text" [(ngModel)]="maxMinute" />
</dt-form-field>
<dt-timepicker
  [minHour]="minHour"
  [maxHour]="maxHour"
  [minMinute]="minMinute"
  [maxMinute]="maxMinute"
></dt-timepicker>