feat: add disabled state for datepicker and datetimepicker

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html

@@ -65,3 +65,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>

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts

@@ -7,6 +7,7 @@ import * as datePickerFormatSrc from '!raw-loader!./examples/date-picker-format-
 import * as datePickerAllowNullSrc from '!raw-loader!./examples/date-picker-allow-null-example.component.ts';
 import * as datePickerFormTsSrc from '!raw-loader!./examples/date-picker-form-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',
@@ -21,4 +22,5 @@ export class DatePickerDocsComponent {
     datePickerAllowNullTs = datePickerAllowNullSrc;
     datePickerFormTs = datePickerFormTsSrc;
     datePickerPositionTs = datePickerPositionSrc;
+    datePickerDisabledTs = datePickerDisabledSrc;
 }

docs/app/documentation/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()
+    };
+
+}

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -49,3 +49,11 @@ <h2>Formatting</h2>
 </component-example>
 <code-example [code]="datetimeFormatHtml" [language]="'HTML'"></code-example>
 <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>

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts

@@ -14,6 +14,9 @@ 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';
+
 
 @Component({
     selector: 'app-datetime-picker-docs',
@@ -34,6 +37,9 @@ export class DatetimePickerDocsComponent {
     datetimeFormatHtml = dateTimeFormatHtml;
     datetimeFormatTs = dateTimeFormatTs;
 
+    datetimeDisabledHtml = dateTimeDisabledHtml;
+    datetimeDisabledTs = dateTimeDisabledTs;
+
     datetimePickerAllowNullTs = dateTimePickerAllowNullTs;
 
 }

docs/app/documentation/component-docs/datetime-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>

docs/app/documentation/component-docs/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();
+}

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';
 
 @NgModule({
@@ -405,12 +408,14 @@ import { HighlightModule } from 'ngx-highlightjs';
         DatePickerRangeExampleComponent,
         DatePickerSingleExampleComponent,
         DatePickerAllowNullExampleComponent,
+        DatePickerDisabledExampleComponent,
         DatePickerFormExampleComponent,
         DatetimeExampleComponent,
         DatetimeNonMeridianExampleComponent,
         DatetimeProgramExampleComponent,
         DatetimeFormatExampleComponent,
         DatetimePickerAllowNullExampleComponent,
+        DatetimeDisabledExampleComponent,
         DropdownContextualMenuExampleComponent,
         DropdownDefaultExampleComponent,
         DropdownIconsExampleComponent,

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>

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;

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,8 +171,10 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
 
     /** Opens the calendar */
     openCalendar(e) {
-        this.isOpen = true;
-        this.getInputValue(e);
+        if (!this.disabled) {
+            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 */

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>

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;

library/src/lib/datetime-picker/datetime-picker.component.ts

@@ -186,7 +186,7 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
 
     /** Opens the popover. */
     openPopover(inputFieldDate?: string): void {
-        if (!this.isOpen) {
+        if (!this.isOpen && !this.disabled) {
             this.isOpen = true;
             if (inputFieldDate !== null && inputFieldDate !== '' && !this.isInvalidDateInput) {
                 this.inputValueChange(this.date);