feat(timepicker): disabling meridian and hiding spinners if input is disabled (#768)

fixes #759

Author: Adrian Faciu

components/timepicker/timepicker.component.ts

@@ -57,7 +57,7 @@ function addMinutes(date:any, minutes:number):Date {
   template: `
     <table>
       <tbody>
-        <tr class="text-center" [ngClass]="{hidden: !showSpinners}">
+        <tr class="text-center" [ngClass]="{hidden: !showSpinners || readonlyInput}">
           <td><a (click)="incrementHours()" [ngClass]="{disabled: noIncrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
           <td>&nbsp;</td>
           <td><a (click)="incrementMinutes()" [ngClass]="{disabled: noIncrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
@@ -71,9 +71,9 @@ function addMinutes(date:any, minutes:number):Date {
           <td class="form-group" [ngClass]="{'has-error': invalidMinutes}">
             <input style="width:50px;" type="text" [(ngModel)]="minutes" (change)="updateMinutes()" class="form-control text-center" [readonly]="readonlyInput" (blur)="minutesOnBlur($event)" maxlength="2">
           </td>
-          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"><button type="button" [ngClass]="{disabled: noToggleMeridian()}" class="btn btn-default text-center" (click)="toggleMeridian()">{{meridian}}</button></td>
+          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"><button type="button" [ngClass]="{disabled: noToggleMeridian() || readonlyInput}" class="btn btn-default text-center" (click)="toggleMeridian()">{{meridian}}</button></td>
         </tr>
-        <tr class="text-center" [ngClass]="{hidden: !showSpinners}">
+        <tr class="text-center" [ngClass]="{hidden: !showSpinners || readonlyInput}">
           <td><a (click)="decrementHours()" [ngClass]="{disabled: noDecrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
           <td>&nbsp;</td>
           <td><a (click)="decrementMinutes()" [ngClass]="{disabled: noDecrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
@@ -389,6 +389,10 @@ export class TimepickerComponent implements ControlValueAccessor, OnInit {
   }
 
   private noToggleMeridian():boolean {
+    if (this.readonlyInput) {
+      return true;
+    }
+
     if (this.selected.getHours() < 13) {
       return addMinutes(this.selected, 12 * 60) > this.max;
     } else {

demo/components/timepicker/timepicker-demo.html

@@ -1,4 +1,6 @@
-<timepicker [(ngModel)]="mytime" (change)="changed()" [hourStep]="hstep" [minuteStep]="mstep" [showMeridian]="ismeridian"></timepicker>
+<timepicker [(ngModel)]="mytime" (change)="changed()" [hourStep]="hstep" 
+            [minuteStep]="mstep" [showMeridian]="ismeridian" 
+            [readonlyInput]="!isEnabled"></timepicker>
 
 <pre class="alert alert-info">Time is: {{mytime}}</pre>
 
@@ -20,5 +22,6 @@
 <hr>
 
 <button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button>
+<button type="button" class="btn btn-info" (click)="isEnabled=!isEnabled">Enable / Disable input</button>
 <button type="button" class="btn btn-primary" (click)="update()">Set to 14:00</button>
 <button type="button" class="btn btn-danger" (click)="clear()">Clear</button>

demo/components/timepicker/timepicker-demo.ts

@@ -15,6 +15,7 @@ export class TimepickerDemoComponent {
   public hstep:number = 1;
   public mstep:number = 15;
   public ismeridian:boolean = true;
+  public isEnabled:boolean = true;
 
   public mytime:Date = new Date();
   public options:any = {