feat: add disabled state for datepicker and datetimepicker (#959)

* add disabled state for datepicker and datetimepicker * add tests, no not allow open if disabled is true
SAP · Jun 26, 2019 · 8b2a242 · 8b2a242
1 parent 7246603
commit 8b2a242
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 10 deletions.
diff --git a/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html b/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html
@@ -72,3 +72,9 @@ <h2>Position</h2>
 </component-example>
 <code-example [code]="datePickerPositionTs" [language]="'typescript'"></code-example>
 
+<separator></separator>
+<h2>Disabled state</h2>
+<component-example name="'ex7'">
+    <fd-date-picker-disabled-example></fd-date-picker-disabled-example>
+</component-example>
+<code-example [code]="datePickerDisabledTs" [language]="'typescript'"></code-example>
diff --git a/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts b/docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts
@@ -8,6 +8,7 @@ import * as datePickerAllowNullSrc from '!raw-loader!./examples/date-picker-allo
 import * as datePickerFormTsSrc from '!raw-loader!./examples/date-picker-form-example.component.ts';
 import * as datePickerRangeFormTsSrc from '!raw-loader!./examples/date-picker-form-range-example.component.ts';
 import * as datePickerPositionSrc from '!raw-loader!./examples/date-picker-position-example.component.ts';
+import * as datePickerDisabledSrc from '!raw-loader!./examples/date-picker-disabled-example.component.ts';
 
 @Component({
     selector: 'app-date-picker',
@@ -23,5 +24,6 @@ export class DatePickerDocsComponent {
     datePickerFormTs = datePickerFormTsSrc;
     datePickerRangeFormTs = datePickerRangeFormTsSrc;
     datePickerPositionTs = datePickerPositionSrc;
+    datePickerDisabledTs = datePickerDisabledSrc;
 
 }
diff --git a/...cumentation/component-docs/date-picker/examples/date-picker-disabled-example.component.ts b/...cumentation/component-docs/date-picker/examples/date-picker-disabled-example.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-date-picker-disabled-example',
+    template: ` <fd-date-picker [disabled]="true" [type]="'single'" [(ngModel)]="selectedDay"></fd-date-picker>
+            <br/>
+            <div>Selected Date: {{selectedDay.date ? selectedDay.date.toDateString() : 'null'}}</div>`
+})
+export class DatePickerDisabledExampleComponent {
+
+    selectedDay = {
+        date: new Date()
+    };
+
+}
diff --git a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html
@@ -51,6 +51,16 @@ <h2>Formatting</h2>
 <code-example [code]="datetimeFormatTs" [language]="'typescript'"></code-example>
 
 <separator></separator>
+
+<h2>Disabled state</h2>
+<component-example [name]="'ex6'">
+    <fd-datetime-disabled-example></fd-datetime-disabled-example>
+</component-example>
+<code-example [code]="datetimeDisabledHtml" [language]="'HTML'"></code-example>
+<code-example [code]="datetimeDisabledTs" [language]="'typescript'"></code-example>
+
+<separator></separator>
+
 <h2>Use in a form</h2>
 <component-example [name]="'ex5'">
     <fd-datetime-form-example></fd-datetime-form-example>

diff --git a/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts b/docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts
@@ -14,10 +14,11 @@ import * as dateTimePickerAllowNullTs from '!raw-loader!./examples/datetime-allo
 import * as dateTimeFormatHtml from '!raw-loader!./examples/datetime-format-example/datetime-format-example.component.html';
 import * as dateTimeFormatTs from '!raw-loader!./examples/datetime-format-example/datetime-format-example.component.ts';
 
+import * as dateTimeDisabledHtml from '!raw-loader!./examples/datetime-disabled-example/datetime-disabled-example.component.html';
+import * as dateTimeDisabledTs from '!raw-loader!./examples/datetime-disabled-example/datetime-disabled-example.component.ts';
 import * as dateTimeFormHtml from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.html';
 import * as dateTimeFormTs from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.ts';
 
-
 @Component({
     selector: 'app-datetime-picker-docs',
     templateUrl: './datetime-picker-docs.component.html',
@@ -37,6 +38,9 @@ export class DatetimePickerDocsComponent {
     datetimeFormatHtml = dateTimeFormatHtml;
     datetimeFormatTs = dateTimeFormatTs;
 
+    datetimeDisabledHtml = dateTimeDisabledHtml;
+    datetimeDisabledTs = dateTimeDisabledTs;
+
     datetimeFormHtml = dateTimeFormHtml;
     datetimeFormTs = dateTimeFormTs;
 

diff --git a/...tetime-picker/examples/datetime-disabled-example/datetime-disabled-example.component.html b/...tetime-picker/examples/datetime-disabled-example/datetime-disabled-example.component.html
@@ -0,0 +1,2 @@
+<!-- Just needs a date object in the ts file! -->
+<fd-datetime-picker [disabled]="true" [(ngModel)]="this.date"></fd-datetime-picker>
diff --git a/...datetime-picker/examples/datetime-disabled-example/datetime-disabled-example.component.ts b/...datetime-picker/examples/datetime-disabled-example/datetime-disabled-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-datetime-disabled-example',
+    templateUrl: './datetime-disabled-example.component.html'
+})
+export class DatetimeDisabledExampleComponent {
+    date: Date = new Date();
+}
diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts
@@ -323,6 +323,9 @@ import { TableResponsiveExampleComponent } from './component-docs/table/examples
 import { DatePickerPositionExampleComponent } from './component-docs/date-picker/examples/date-picker-position-example.component';
 import { TimePickerOtherDelimiterExampleComponent } from './component-docs/time-picker/examples/time-picker-other-delimiter-example.component';
 import { DatetimeFormatExampleComponent } from './component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component';
+import { DatePickerDisabledExampleComponent } from './component-docs/date-picker/examples/date-picker-disabled-example.component';
+import { DatetimeDisabledExampleComponent } from './component-docs/datetime-picker/examples/datetime-disabled-example/datetime-disabled-example.component';
+
 import { HighlightModule } from 'ngx-highlightjs';
 import { DatePickerFormRangeExampleComponent } from './component-docs/date-picker/examples/date-picker-form-range-example.component';
 import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component';
@@ -407,6 +410,7 @@ import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/e
         DatePickerRangeExampleComponent,
         DatePickerSingleExampleComponent,
         DatePickerAllowNullExampleComponent,
+        DatePickerDisabledExampleComponent,
         DatePickerFormExampleComponent,
         DatePickerFormRangeExampleComponent,
         DatetimeExampleComponent,
@@ -415,6 +419,7 @@ import { DatetimeFormExampleComponent } from './component-docs/datetime-picker/e
         DatetimeFormatExampleComponent,
         DatetimeFormExampleComponent,
         DatetimePickerAllowNullExampleComponent,
+        DatetimeDisabledExampleComponent,
         DropdownContextualMenuExampleComponent,
         DropdownDefaultExampleComponent,
         DropdownIconsExampleComponent,

diff --git a/library/src/lib/date-picker/date-picker.component.html b/library/src/lib/date-picker/date-picker.component.html
@@ -1,6 +1,7 @@
 <fd-popover [(isOpen)]="isOpen"
             [triggers]="[]"
-            [placement]="placement">
+            [placement]="placement"
+            [disabled]="disabled">
     <fd-popover-control>
         <div class="fd-input-group fd-input-group--after"
              [ngClass]="{'fd-input-group--compact' : compact}">
@@ -11,9 +12,10 @@
                    [placeholder]="placeholder"
                    (keyup)="getInputValue(datePicker.value)"
                    (click)="openCalendar(datePicker.value)"
+                   [disabled]="disabled"
                    [ngClass]="{ 'fd-input--compact': compact, 'is-invalid': isInvalidDateInput && validate }">
             <span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button">
-                    <button class="fd-popover__control fd-button--icon fd-button--light sap-icon--calendar"
+                    <button [disabled]="disabled" class="fd-popover__control fd-button--icon fd-button--light sap-icon--calendar"
                             (click)="toggleCalendar(datePicker.value)" [attr.aria-label]="displayCalendarToggleLabel"
                             [attr.aria-expanded]="isOpen" type="button"></button>
             </span>

diff --git a/library/src/lib/date-picker/date-picker.component.spec.ts b/library/src/lib/date-picker/date-picker.component.spec.ts
@@ -38,6 +38,13 @@ describe('DatePickerComponent', () => {
         expect(component.inputFieldDate).toBeNull();
     });
 
+    it('should not open the calendar if the component is disabled', () => {
+        component.isOpen = false;
+        component.disabled = true;
+        component.openCalendar({});
+        expect(component.isOpen).toBeFalsy();
+    });
+
     it('should close the calendar', () => {
         component.isOpen = true;
         component.isInvalidDateInput = true;

diff --git a/library/src/lib/date-picker/date-picker.component.ts b/library/src/lib/date-picker/date-picker.component.ts
@@ -111,6 +111,10 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
     @Input()
     placement: Placement = 'bottom-start';
 
+    /** Whether the date picker is disabled. */
+    @Input()
+    disabled: boolean;
+
     /**
      * Function used to disable certain dates in the calendar.
      * @param d Date
@@ -167,9 +171,11 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
 
     /** Opens the calendar */
     openCalendar(e) {
-        this.onTouched({date: this.selectedDay.date});
-        this.isOpen = true;
-        this.getInputValue(e);
+        if (!this.disabled) {
+            this.onTouched({date: this.selectedDay.date});
+            this.isOpen = true;
+            this.getInputValue(e);
+        }
     }
 
     /** Toggles the calendar open or closed */
@@ -283,7 +289,7 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
 
     /** @hidden */
     setDisabledState(isDisabled: boolean): void {
-        // void for now
+        this.disabled = isDisabled;
     }
 
     /** @hidden */

diff --git a/library/src/lib/datetime-picker/datetime-picker.component.html b/library/src/lib/datetime-picker/datetime-picker.component.html
@@ -3,6 +3,7 @@
                 [closeOnOutsideClick]="false"
                 [closeOnEscapeKey]="false"
                 [triggers]="[]"
+                [disabled]="disabled"
                 [placement]="placement">
         <fd-popover-control>
             <div class="fd-input-group fd-input-group--after"
@@ -18,7 +19,7 @@
                 <span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button">
                     <button class="fd-popover__control fd-button--icon fd-button--light sap-icon--date-time"
                             (click)="togglePopover()" [attr.aria-label]="displayDatetimeToggleLabel"
-                            [attr.aria-expanded]="isOpen" type="button"></button>
+                            [attr.aria-expanded]="isOpen" type="button" [disabled]="disabled"></button>
                 </span>
             </div>
         </fd-popover-control>

diff --git a/library/src/lib/datetime-picker/datetime-picker.component.spec.ts b/library/src/lib/datetime-picker/datetime-picker.component.spec.ts
@@ -39,6 +39,14 @@ describe('DatetimePickerComponent', () => {
         expect(component.isOpen).toBe(true);
     });
 
+    it('should not open the popover if the component is disabled', () => {
+        component.isOpen = false;
+        component.disabled = true;
+        component.isInvalidDateInput = false;
+        component.openPopover();
+        expect(component.isOpen).toBe(false);
+    });
+
     it('should close the calendar', () => {
         component.isOpen = true;
         component.isInvalidDateInput = true;

diff --git a/library/src/lib/datetime-picker/datetime-picker.component.ts b/library/src/lib/datetime-picker/datetime-picker.component.ts
@@ -187,8 +187,8 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
 
     /** Opens the popover. */
     openPopover(inputFieldDate?: string): void {
-        this.onTouched(this.selectedDay.date);
-        if (!this.isOpen) {
+        if (!this.isOpen && !this.disabled) {
+            this.onTouched(this.selectedDay.date);
             this.isOpen = true;
             if (inputFieldDate !== null && inputFieldDate !== '' && !this.isInvalidDateInput) {
                 this.inputValueChange(this.date);