feat(datepicker): Added datepicker component.

Fixes #894
dynatrace-oss · Dec 9, 2020 · be6a0e0 · be6a0e0
1 parent c22b6ca
commit be6a0e0
Show file tree

Hide file tree

Showing 39 changed files with 3,681 additions and 336 deletions.
diff --git a/apps/demos/src/app-routing.module.ts b/apps/demos/src/app-routing.module.ts
@@ -324,6 +324,7 @@ import {
   DtExampleComboboxCustomOptionHeight,
   DtExampleFilterFieldInfiniteDataDepth,
   DtExampleSelectCustomValueTemplate,
+  DtExampleCalendarMinMax,
   DtExampleDatepickerDark,
   DtExampleDatepickerDefault
 } from '@dynatrace/barista-examples';
@@ -583,6 +584,7 @@ const ROUTES: Routes = [
   { path: 'drawer-dynamic-example', component: DtExampleDrawerDynamic },
   { path: 'drawer-nested-example', component: DtExampleDrawerNested },
   { path: 'drawer-over-example', component: DtExampleDrawerOver },
+  { path: 'calendar-min-max-example', component: DtExampleCalendarMinMax},
   { path: 'datepicker-dark-example', component: DtExampleDatepickerDark},
   { path: 'datepicker-default-example', component: DtExampleDatepickerDefault},
   {

diff --git a/apps/demos/src/nav-items.ts b/apps/demos/src/nav-items.ts
@@ -449,6 +449,10 @@ export const DT_DEMOS_EXAMPLE_NAV_ITEMS = [
         name: 'datepicker-default-example',
         route: '/datepicker-default-example',
       },
+      {
+        name: 'calendar-min-max-example',
+        route: '/calendar-min-max-example',
+      },
     ],
   },
   {

diff --git a/apps/dev/src/app.module.ts b/apps/dev/src/app.module.ts
@@ -95,7 +95,6 @@ import { DtIconModule } from '@dynatrace/barista-components/icon';
 import {
   DT_DEFAULT_UI_TEST_CONFIG,
   DT_UI_TEST_CONFIG,
-  DtNativeDateModule,
   DT_OVERLAY_THEMING_CONFIG,
   DT_DEFAULT_DARK_THEMING_CONFIG,
 } from '@dynatrace/barista-components/core';
@@ -115,7 +114,6 @@ export class NoopRouteComponent {}
     DtIconModule.forRoot({ svgIconLocation: '/assets/icons/{{name}}.svg' }),
     DevAppDynatraceModule,
     DragDropModule,
-    DtNativeDateModule,
   ],
   declarations: [
     DevApp,

diff --git a/apps/dev/src/datepicker/datepicker-demo.component.html b/apps/dev/src/datepicker/datepicker-demo.component.html
@@ -1,12 +1,90 @@
 <h1>Datepicker</h1>
 
+<h2>Full datepicker</h2>
+
+<dt-datepicker
+  [startAt]="startAt"
+  [disabled]="isDatepickerDisabled"
+  [isTimeEnabled]="isDatepickerTimeEnabled"
+  [showTodayButton]="isDatepickerTodayButtonShown"
+></dt-datepicker>
+
+<dt-checkbox [(ngModel)]="isDatepickerDisabled">Disabled</dt-checkbox>
+<dt-checkbox [(ngModel)]="isDatepickerTimeEnabled"
+  >Enabled Time Mode</dt-checkbox
+>
+<dt-checkbox [(ngModel)]="isDatepickerTodayButtonShown"
+  >Show Datepicker Today Button</dt-checkbox
+>
+
+<h2>Calendar</h2>
+
+<dt-calendar [startAt]="startAt"></dt-calendar>
+
+<h2>Calendar body only</h2>
+
+<dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
+<h2>Calendar with min and max date</h2>
+
+<dt-checkbox [(ngModel)]="showTodayButton"
+  >Show Calendar Today Button
+</dt-checkbox>
+
+<div class="dt-calendar-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>
+
 <h2>Timepicker</h2>
 
 <dt-timepicker [disabled]="isTimepickerDisabled"></dt-timepicker>
 
 <dt-checkbox [(ngModel)]="isTimepickerDisabled">Disabled</dt-checkbox>
 
 <div dtTheme=":dark" class="dt-example-dark">
+  <h2>Full Dark Mode Datepicker</h2>
+
+  <dt-datepicker
+    [startAt]="startAt"
+    [disabled]="isDarkDatepickerDisabled"
+    [isTimeEnabled]="isDarkDatepickerTimeEnabled"
+    [showTodayButton]="isDarkDatepickerTodayButtonShown"
+  ></dt-datepicker>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerDisabled">Disabled</dt-checkbox>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerTimeEnabled"
+    >Enabled Time Mode</dt-checkbox
+  >
+  <dt-checkbox [(ngModel)]="isDarkDatepickerTodayButtonShown"
+    >Show Datepicker Today Button</dt-checkbox
+  >
+
+  <h2>Dark Mode Calendar</h2>
+
+  <dt-calendar [startAt]="startAt"></dt-calendar>
+
+  <h2>Dark Mode Calendar Body Only</h2>
+
+  <dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
   <h2>Dark Mode Timepicker</h2>
 
   <dt-timepicker

diff --git a/apps/dev/src/datepicker/datepicker-demo.component.scss b/apps/dev/src/datepicker/datepicker-demo.component.scss
@@ -5,3 +5,10 @@
 .dt-example-dark h2 {
   color: white;
 }
+
+.dt-calendar-limit-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: 10px;
+  margin-bottom: 10px;
+}
diff --git a/apps/dev/src/datepicker/datepicker-demo.component.ts b/apps/dev/src/datepicker/datepicker-demo.component.ts
@@ -14,14 +14,54 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { DtDateAdapter } from '@dynatrace/barista-components/core';
+import { DtDatePicker } from '@dynatrace/barista-components/experimental/datepicker';
 
 @Component({
   selector: 'demo-component',
   templateUrl: 'datepicker-demo.component.html',
   styleUrls: ['datepicker-demo.component.scss'],
 })
 export class DatepickerDemo {
+  startAt = new Date(2020, 7, 31);
+  minDate = new Date(2020, 5, 31);
+  maxDate = new Date(2020, 11, 31);
+  isDatepickerDisabled = false;
   isTimepickerDisabled = false;
+  isDarkDatepickerDisabled = false;
   isDarkTimepickerDisabled = false;
+  isDatepickerTimeEnabled = true;
+  isDarkDatepickerTimeEnabled = true;
+  showTodayButton = false;
+  isDatepickerTodayButtonShown = false;
+  isDarkDatepickerTodayButtonShown = false;
+
+  @ViewChild('datepickerMinDate') datepickerMinDate: DtDatePicker<any>;
+
+  @ViewChild('datepickerMaxDate') datepickerMaxDate: DtDatePicker<any>;
+
+  get formattedMinDate(): string {
+    return this._dateAdapter.format(
+      this.datepickerMinDate?.value || this.minDate,
+      {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+    );
+  }
+
+  get formattedMaxDate(): string {
+    return this._dateAdapter.format(
+      this.datepickerMaxDate?.value || this.maxDate,
+      {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+    );
+  }
+
+  constructor(public _dateAdapter: DtDateAdapter<any>) {}
 }