Made timepicker time format optional (#1736)

blackbaud · Jun 30, 2018 · 2d75554 · 2d75554
1 parent 113c02c
commit 2d75554
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/demos/timepicker/timepicker-demo.component.html b/src/demos/timepicker/timepicker-demo.component.html
@@ -64,7 +64,6 @@ <h3>
     <input
       type="hidden"
       [skyTimepickerInput]="timePickerExample3"
-      [timeFormat]="format24"
       [returnFormat]="returnFormat"
       [(ngModel)]="selectedTime3"
       #time3="ngModel">

diff --git a/src/modules/timepicker/timepicker-component.spec.ts b/src/modules/timepicker/timepicker-component.spec.ts
@@ -86,7 +86,7 @@ describe('Timepicker', () => {
     let units = sections.item(0).querySelectorAll('.sky-timepicker-column');
     let hours = units.item(0).querySelectorAll('button');
     let minutes = units.item(1).querySelectorAll('button');
-    if (component.timeFormat === 'hh') {
+    if (component.timeFormat === 'hh' || !component.timeFormat) {
       let meridies = units.item(2).querySelectorAll('button');
       expect(hours.item(0)).toHaveText('1');
       expect(hours.item(11)).toHaveText('12');
@@ -108,6 +108,16 @@ describe('Timepicker', () => {
     }
   }
 
+  it('should default to the twelve hour timepicker without timeFormat', fakeAsync(() => {
+    fixture.detectChanges();
+    component.timeFormat = undefined;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    openTimepicker(nativeElement, fixture);
+    verifyTimepicker(nativeElement);
+  }));
+
   it('should have the twelve hour timepicker', fakeAsync(() => {
     fixture.detectChanges();
     component.timeFormat = 'hh';

diff --git a/src/modules/timepicker/timepicker.directive.ts b/src/modules/timepicker/timepicker.directive.ts
@@ -52,12 +52,18 @@ export class SkyTimepickerInputDirective implements
   OnInit, OnDestroy, ControlValueAccessor, Validator, OnChanges {
 
   public pickerChangedSubscription: Subscription;
+  private _timeFormat: string = 'hh';
 
   @Input()
   public skyTimepickerInput: SkyTimepickerComponent;
 
   @Input()
-  public timeFormat: string;
+  public set timeFormat(value: string) {
+    this._timeFormat = value;
+  }
+  public get timeFormat(): string {
+    return this._timeFormat || 'hh';
+  }
 
   @Input()
   public returnFormat: string;