Timepicker: Added showPlaceholders boolean. Ref valor-software#3544

demo/src/app/components/+timepicker/demos/config/config.ts

@@ -11,7 +11,8 @@ export function getTimepickerConfig(): TimepickerConfig {
     readonlyInput: false,
     mousewheel: true,
     showMinutes: true,
-    showSeconds: false
+    showSeconds: false,
+    showPlaceholders: true
   });
 }
 

demo/src/app/components/+timepicker/demos/index.ts

@@ -6,6 +6,7 @@ import { DemoTimepickerCustomComponent } from './custom/custom';
 import { DemoTimepickerDynamicComponent } from './dynamic/dynamic';
 import { DemoTimepickerMinMaxComponent } from './min-max/min-max';
 import { DemoTimepickerToggleMinutesSecondsComponent } from './toggle-minutes-seconds/toggle-minutes-seconds';
+import { DemoTimepickerTogglePlaceholdersComponent } from './toggle-placeholders/toggle-placeholders';
 import { DemoTimepickerMousewheelArrowkeysComponent } from './mousewheel-arrowkeys/mousewheel-arrowkeys';
 import { DemoTimepickerCustomValidationComponent } from './custom-validation/custom-validation';
 import { DemoTimepickerSpinnersComponent } from './spinners/spinners';
@@ -19,6 +20,7 @@ export const DEMO_COMPONENTS = [
   DemoTimepickerCustomComponent,
   DemoTimepickerDynamicComponent,
   DemoTimepickerToggleMinutesSecondsComponent,
+  DemoTimepickerTogglePlaceholdersComponent,
   DemoTimepickerMousewheelArrowkeysComponent,
   DemoTimepickerCustomValidationComponent,
   DemoTimepickerSpinnersComponent

demo/src/app/components/+timepicker/demos/toggle-placeholders/toggle-placeholders.html

@@ -0,0 +1,7 @@
+<timepicker [(ngModel)]="myTime" [showPlaceholders]="showPlaceholders"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}<br>showPlaceholders: {{showPlaceholders}}</pre>
+
+<button class="btn btn-default text-center" (click)="togglePlaceholders()">
+  {{showPlaceholders? 'Hide placeholders' : 'Show placeholders'}}
+</button>

demo/src/app/components/+timepicker/demos/toggle-placeholders/toggle-placeholders.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-placeholders',
+  templateUrl: './toggle-placeholders.html'
+})
+export class DemoTimepickerTogglePlaceholdersComponent {
+  myTime: Date = new Date();
+  showPlaceholders: boolean = true;
+
+  togglePlaceholders(): void {
+    this.showPlaceholders = !this.showPlaceholders;
+  }
+}

src/spec/timepicker/timepicker.component.spec.ts

@@ -292,12 +292,16 @@ describe('Component: timepicker', () => {
       fixture = TestBed.createComponent(TimepickerComponent);
       fixture.detectChanges();
       component = fixture.componentInstance;
-      inputMinutes = getInputElements(fixture)[1];
     });
     it('should hide minutes field when property showMinutes is == false', () => {
       component.showMinutes = false;
+
+      component.writeValue(testTime());
+
       fixture.detectChanges();
-      expect(inputSeconds).toBeFalsy();
+      inputMinutes = getInputElements(fixture)[1];
+
+      expect(inputMinutes).toBeFalsy();
     });
   });
 
@@ -312,33 +316,72 @@ describe('Component: timepicker', () => {
 
     // отображать поле секунды если showSeconds включен
     it('should display seconds field if showMeridian switch on', () => {
+        component.showSeconds = true;
+
+        component.writeValue(testTime());
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          inputSeconds = getInputElements(fixture)[2];
+
+          fireEvent(inputSeconds, 'change');
+
+          expect(inputSeconds).toBeTruthy();
+        });
+      });
+    // проверить данные в поле секунды
+    it('should validate the data in the seconds input', () => {
       component.showSeconds = true;
 
-      component.writeValue(testTime());
+      component.writeValue(testTime(2, 6, 7));
 
       fixture.detectChanges();
       fixture.whenStable().then(() => {
         inputSeconds = getInputElements(fixture)[2];
 
         fireEvent(inputSeconds, 'change');
 
-        expect(inputSeconds).toBeTruthy();
+        expect(inputSeconds.value).toBe('07');
       });
     });
-    // проверить данные в поле секунды
-    it('should validate the data in the seconds input', () => {
-      component.showSeconds = true;
+  });
 
-      component.writeValue(testTime(2, 6, 7));
+  describe('hide placeholders on inputs with property of showPlaceholders', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+    });
+    it('should show placeholders on inputs when property showPlaceholders is == true', () => {
+      component.showSeconds = true;
+      component.showPlaceholders = true;
+
+      component.writeValue(testTime());
 
       fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        inputSeconds = getInputElements(fixture)[2];
+      inputHours = getInputElements(fixture)[0];
+      inputMinutes = getInputElements(fixture)[1];
+      inputSeconds = getInputElements(fixture)[2];
 
-        fireEvent(inputSeconds, 'change');
+      expect(inputHours.placeholder).not.toBeFalsy();
+      expect(inputMinutes.placeholder).not.toBeFalsy();
+      expect(inputSeconds.placeholder).not.toBeFalsy();
+    });
+    it('should hide placeholders on inputs when property showPlaceholders is == false', () => {
+      component.showSeconds = true;
+      component.showPlaceholders = false;
+
+      component.writeValue(testTime());
 
-        expect(inputSeconds.value).toBe('07');
-      });
+      fixture.detectChanges();
+      inputHours = getInputElements(fixture)[0];
+      inputMinutes = getInputElements(fixture)[1];
+      inputSeconds = getInputElements(fixture)[2];
+
+      expect(inputHours.placeholder).toBeFalsy();
+      expect(inputMinutes.placeholder).toBeFalsy();
+      expect(inputSeconds.placeholder).toBeFalsy();
     });
   });
 

src/timepicker/timepicker.component.html

@@ -34,7 +34,7 @@
     <td class="form-group" [class.has-error]="invalidHours">
       <input type="text"
              class="form-control text-center bs-timepicker-field"
-             placeholder="HH"
+             [attr.placeholder]="showPlaceholders ? 'HH' : null"
              maxlength="2"
              [readonly]="readonlyInput"
              [value]="hours"
@@ -48,7 +48,7 @@
     <td class="form-group" *ngIf="showMinutes"[class.has-error]="invalidMinutes">
       <input type="text"
              class="form-control text-center bs-timepicker-field"
-             placeholder="MM"
+             [attr.placeholder]="showPlaceholders ? 'MM' : null"
              maxlength="2"
              [readonly]="readonlyInput"
              [value]="minutes"
@@ -64,7 +64,7 @@
         [class.has-error]="invalidSeconds">
       <input type="text"
              class="form-control text-center bs-timepicker-field"
-             placeholder="SS"
+             [attr.placeholder]="showPlaceholders ? 'SS' : null"
              maxlength="2"
              [readonly]="readonlyInput"
              [value]="seconds"

src/timepicker/timepicker.component.ts

@@ -91,6 +91,8 @@ export class TimepickerComponent
   @Input() showMinutes: boolean;
   /** show seconds in timepicker */
   @Input() showSeconds: boolean;
+  /** show placeholders in timepicker */
+  @Input() showPlaceholders: boolean;
   /** meridian labels based on locale */
   @Input() meridians: string[];
   /** minimum time user can select */

src/timepicker/timepicker.config.ts

@@ -25,6 +25,8 @@ export class TimepickerConfig {
   showSeconds = false;
   /** show minutes in timepicker */
   showMinutes = true;
+  /** show placeholders in timepicker */
+  showPlaceholders = true;
   /** minimum time user can select */
   min: Date;
   /** maximum time user can select */