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>