Handle options property changes with mz-datepicker (#286)

sherweb · Feb 9, 2018 · cd54644 · cd54644
1 parent 8316482
commit cd54644
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/src/app/datepicker/datepicker.directive.ts b/src/app/datepicker/datepicker.directive.ts
@@ -25,6 +25,7 @@ export class MzDatepickerDirective extends HandlePropChanges implements OnInit,
   inputElement: JQuery;
   inputContainerElement: JQuery;
   inputValueSubscription: Subscription;
+  isInitRound = true;
   labelElement: JQuery;
   stopChangePropagation = false;
 
@@ -58,6 +59,7 @@ export class MzDatepickerDirective extends HandlePropChanges implements OnInit,
     this.initDatepicker();
     this.initInputSubscription();
     this.handleProperties();
+    this.isInitRound = false;
   }
 
   ngOnDestroy() {
@@ -69,6 +71,7 @@ export class MzDatepickerDirective extends HandlePropChanges implements OnInit,
   initHandlers() {
     this.handlers = {
       label: () => this.handleLabel(),
+      options: () => this.handleOptions(),
       placeholder: () => this.handlePlaceholder(),
     };
   }
@@ -174,6 +177,12 @@ export class MzDatepickerDirective extends HandlePropChanges implements OnInit,
     this.renderer.invokeElementMethod(this.labelElement, 'text', [this.label]);
   }
 
+  handleOptions() {
+    if (!this.isInitRound) {
+      this.picker.set(this.options);
+    }
+  }
+
   handlePlaceholder() {
     const placeholder = !!this.placeholder ? this.placeholder : null;
     this.renderer.setElementAttribute(this.inputElement[0], 'placeholder', placeholder);

diff --git a/src/app/datepicker/datepicker.directive.view.spec.ts b/src/app/datepicker/datepicker.directive.view.spec.ts
@@ -504,6 +504,44 @@ describe('MzDatepickerDirective:view', () => {
           expect((document.activeElement as HTMLElement).blur).toHaveBeenCalled();
         });
       }));
+
+      it('should be reapplied to datepicker when changed', fakeAsync(() => {
+
+        buildComponent(`
+          <mz-datepicker-container>
+            <input mz-datepicker
+              id="datepicker"
+              [options]="options">
+          </mz-datepicker-container>
+        `, {
+          options: {
+            disable: [new Date('2001,01,01')],
+          },
+        }).then((fixture) => {
+          component = fixture.componentInstance;
+          nativeElement = fixture.nativeElement;
+          fixture.detectChanges();
+          tick();
+
+          let disabledDates = datepicker().get('disable');
+
+          expect(disabledDates).toEqual(component.options.disable);
+
+          component.options = {
+            ...component.options,
+            disable: [
+              new Date('2001, 01, 01'),
+              new Date('2001, 01, 02'),
+            ],
+          };
+
+          fixture.detectChanges();
+
+          disabledDates = datepicker().get('disable');
+
+          expect(disabledDates).toEqual(component.options.disable);
+        });
+      }));
     });
   });
 });