fix: Add displayMinutes option to time component (#1097)

* Add displayMinute option to time component

* Add hours disable option

* minor fix

* details

docs/app/documentation/component-docs/calendar/calendar-docs.component.html

@@ -19,7 +19,6 @@ <h2>Standard Calendar</h2>
 <code-example [exampleFiles]="calendarSingleSource"></code-example>
 
 <separator></separator>
-
 <h2>Range Selection Calendar</h2>
 <description>
     Allows the selection of a range of dates. Only the first and last days of the range are passed back.

docs/app/documentation/component-docs/time-picker/examples/time-picker-examples.component.ts

@@ -30,6 +30,16 @@ export class TimePickerNoSecondsExampleComponent {
 
 }
 
+@Component({
+    selector: 'fd-time-picker-only-hours-example',
+    templateUrl: './time-picker-only-hours-example.component.html'
+})
+export class TimePickerOnlyHoursExampleComponent {
+
+    timePickerOnlyHoursObject = { hour: 12, minute: null, second: null };
+
+}
+
 @Component({
     selector: 'fd-time-picker-disabled-example',
     templateUrl: './time-picker-disabled-example.component.html'

docs/app/documentation/component-docs/time-picker/examples/time-picker-only-hours-example.component.html

@@ -0,0 +1,5 @@
+<fd-time-picker [displaySeconds]="false"
+                [displayMinutes]="false"
+                [(ngModel)]="timePickerOnlyHoursObject"></fd-time-picker>
+<br />
+Selected Time: {{timePickerOnlyHoursObject.hour}}h

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

@@ -1,63 +1,74 @@
 <h2>24-Hour Time Picker</h2>
 <description>This is the default time picker setting.</description>
 <component-example [name]="'ex1'">
-  <fd-time-picker-example></fd-time-picker-example>
+    <fd-time-picker-example></fd-time-picker-example>
 </component-example>
 <code-example [exampleFiles]="timePicker"></code-example>
 
 <separator></separator>
 <h2>12-Hour Time Picker</h2>
 <description>Set <code>[meridian]="true"</code> to use a 12-hour clock.</description>
 <component-example [name]="'ex2'">
-  <fd-time-picker-12-example></fd-time-picker-12-example>
+    <fd-time-picker-12-example></fd-time-picker-12-example>
 </component-example>
 <code-example [exampleFiles]="meridianTimePicker"></code-example>
 
 <separator></separator>
 <h2>Time Picker Without Seconds</h2>
 <description>Use <code>[displaySeconds]=false</code> to turn off seconds for the time picker.</description>
 <component-example [name]="'ex3'">
-  <fd-time-picker-no-seconds-example></fd-time-picker-no-seconds-example>
+    <fd-time-picker-no-seconds-example></fd-time-picker-no-seconds-example>
 </component-example>
 <code-example [exampleFiles]="timePickerNoSeconds"></code-example>
 
+<separator></separator>
+<h2>Time Picker Without Minutes and Seconds</h2>
+<description>Use <code>[displaySeconds]="false"</code>, <code>[displayMinutes]="false"</code> or <code>[displayHours]="false"</code>
+    to turn off seconds, minutes or hours for the time picker. At least one of them should be enabled.
+</description>
+<component-example [name]="'ex4'">
+    <fd-time-picker-only-hours-example></fd-time-picker-only-hours-example>
+</component-example>
+<code-example [exampleFiles]="timePickerOnlyHours"></code-example>
+
 <separator></separator>
 <h2>Disabled Time Picker</h2>
 <description>Set <code>[disabled]="true"</code> to disable the time picker.</description>
-<component-example [name]="'ex4'">
-  <fd-time-picker-disabled-example></fd-time-picker-disabled-example>
+<component-example [name]="'ex5'">
+    <fd-time-picker-disabled-example></fd-time-picker-disabled-example>
 </component-example>
 <code-example [exampleFiles]="disabledTimePicker"></code-example>
 
 <separator></separator>
 <h2>Compact Time Picker</h2>
 <description>Set <code>[compact]="true"</code> to use compact time-picker.</description>
-<component-example [name]="'ex5'">
-  <fd-time-picker-compact-example></fd-time-picker-compact-example>
+<component-example [name]="'ex6'">
+    <fd-time-picker-compact-example></fd-time-picker-compact-example>
 </component-example>
 <code-example [exampleFiles]="compactTimePicker"></code-example>
 
 <separator></separator>
 <h2>Null Validity</h2>
 <description>Null input values are considered valid by default. Use <code>[allowNull]="false"</code> to make them
-  invalid.</description>
-<component-example [name]="'ex6'">
-  <fd-time-picker-allow-null-example></fd-time-picker-allow-null-example>
+    invalid.
+</description>
+<component-example [name]="'ex7'">
+    <fd-time-picker-allow-null-example></fd-time-picker-allow-null-example>
 </component-example>
 <code-example [exampleFiles]="nullTimePicker"></code-example>
 
 <separator></separator>
 <h2>Formatting</h2>
 <description>Providing a custom format for time is possible through providing service</description>
-<component-example [name]="'ex7'">
-  <fd-time-picker-other-delimiter-example></fd-time-picker-other-delimiter-example>
+<component-example [name]="'ex8'">
+    <fd-time-picker-other-delimiter-example></fd-time-picker-other-delimiter-example>
 </component-example>
 <code-example [exampleFiles]="otherFormatTimePicker"></code-example>
 
 <separator></separator>
 <h2>Time Picker in Form</h2>
 <description>The time-picker component may also be used together with Angular reactive forms.</description>
-<component-example [name]="'ex7'">
-  <fd-time-picker-form-example></fd-time-picker-form-example>
+<component-example [name]="'ex9'">
+    <fd-time-picker-form-example></fd-time-picker-form-example>
 </component-example>
 <code-example [exampleFiles]="timePickerForm"></code-example>

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

@@ -4,6 +4,7 @@ import * as timePickerSrc from '!raw-loader!./examples/time-picker-example.compo
 import * as timePickerMeridianSrc from '!raw-loader!./examples/time-picker-12-example.component.html';
 import * as timePickerDisabledSrc from '!raw-loader!./examples/time-picker-disabled-example.component.html';
 import * as timePickerNoSecondsSrc from '!raw-loader!./examples/time-picker-no-seconds-example.component.html';
+import * as timePickerOnlyHoursSrc from '!raw-loader!./examples/time-picker-only-hours-example.component.html';
 import * as timePickerCompactSrc from '!raw-loader!./examples/time-picker-compact-example.component.html';
 import * as timePickerNullSrc from '!raw-loader!./examples/time-picker-allow-null-example.component.html';
 import * as timePickerOtherDelimiterSrc from '!raw-loader!./examples/time-picker-other-delimiter-example.component.html';
@@ -33,6 +34,11 @@ export class TimePickerDocsComponent {
         code: timePickerNoSecondsSrc
     }];
 
+    timePickerOnlyHours: ExampleFile[] = [{
+        language: 'html',
+        code: timePickerOnlyHoursSrc
+    }];
+
     disabledTimePicker: ExampleFile[] = [{
         language: 'html',
         code: timePickerDisabledSrc

docs/app/documentation/component-docs/time/examples/time-examples.component.ts

@@ -40,6 +40,16 @@ export class TimeNoSecondsExampleComponent {
 
 }
 
+@Component({
+    selector: 'fd-time-only-hours-example',
+    templateUrl: './time-only-hours-example.component.html'
+})
+export class TimeOnlyHoursExampleComponent {
+
+    onlyHoursTime = { hour: 12, minute: null, second: null };
+
+}
+
 @Component({
     selector: 'fd-time-disabled-example',
     templateUrl: './time-disabled-example.component.html'

docs/app/documentation/component-docs/time/examples/time-only-hours-example.component.html

@@ -0,0 +1,5 @@
+<fd-time [displaySeconds]="false"
+         [displayMinutes]="false"
+         [(ngModel)]="onlyHoursTime"></fd-time>
+<br />
+Selected Time: {{onlyHoursTime.hour}}h

docs/app/documentation/component-docs/time/time-docs.component.html

@@ -37,11 +37,22 @@ <h2>Clock Without Seconds</h2>
 
 <separator></separator>
 
+<h2>Clock Without Minutes and Seconds</h2>
+<description>Use <code>[displaySeconds]="false"</code>, <code>[displayMinutes]="false"</code> or <code>[displayHours]="false"</code>
+    to turn off seconds, minutes or hours for the time picker. At least one of them should be enabled.
+</description>
+<component-example [name]="'ex5'">
+    <fd-time-only-hours-example></fd-time-only-hours-example>
+</component-example>
+<code-example [exampleFiles]="timeOnlyHours"></code-example>
+
+<separator></separator>
+
 <h2>Disabled State</h2>
 <description>
     You can disable the entire component by setting <code>[disabled]="true"</code>.
 </description>
-<component-example [name]="'ex5'">
+<component-example [name]="'ex6'">
     <fd-time-disabled-example></fd-time-disabled-example>
 </component-example>
 <code-example [exampleFiles]="timeDisabled"></code-example>
@@ -57,7 +68,7 @@ <h2>Internationalization</h2>
     Also it is possible to modify placeholders of the inputs, such as hours, minutes, seconds, and meridian. Besides
     service allows to define if meridian modifier should be validated case sensitive.
 </description>
-<component-example [name]="'ex6'">
+<component-example [name]="'ex7'">
     <fd-time-i18n-example></fd-time-i18n-example>
 </component-example>
 <code-example [exampleFiles]="timeI18n"></code-example>
@@ -69,7 +80,7 @@ <h2>Time in Form</h2>
     The time component may also be used within a form. The values within the form may then be accessed through the
     usual methods used for accessing data within Angular reactive forms.
 </description>
-<component-example [name]="'ex7'">
+<component-example [name]="'ex8'">
     <fd-time-form-example></fd-time-form-example>
 </component-example>
 <code-example [exampleFiles]="timeForm"></code-example>

docs/app/documentation/component-docs/time/time-docs.component.ts

@@ -7,6 +7,7 @@ import * as timeMeridianSrc from '!raw-loader!./examples/time-12-example.compone
 import * as timeDisabledSrc from '!raw-loader!./examples/time-disabled-example.component.html';
 import * as timeNoSpinnersSrc from '!raw-loader!./examples/time-no-spinners-example.component.html';
 import * as timeNoSecondsSrc from '!raw-loader!./examples/time-no-seconds-example.component.html';
+import * as timeOnlyHoursSrc from '!raw-loader!./examples/time-only-hours-example.component.html';
 import * as timeI18nSrc from '!raw-loader!./examples/time-i18n-example.component.ts';
 import * as timeFormHtmlSrc from '!raw-loader!./examples/time-form-example.component.html'
 import * as timeFormTsSrc from '!raw-loader!./examples/time-form-example.component.ts'
@@ -71,6 +72,11 @@ export class TimeDocsComponent {
         code: timeNoSecondsSrc
     }];
 
+    timeOnlyHours: ExampleFile[] = [{
+        language: 'html',
+        code: timeOnlyHoursSrc
+    }];
+
     timeI18n: ExampleFile[] = [{
         language: 'typescript',
         code: timeI18nSrc

docs/app/documentation/documentation.module.ts

@@ -190,15 +190,15 @@ import {
     Time12ExampleComponent,
     TimeDisabledExampleComponent,
     TimeNoSecondsExampleComponent,
-    TimeNoSpinnersExampleComponent
+    TimeNoSpinnersExampleComponent, TimeOnlyHoursExampleComponent
 } from './component-docs/time/examples/time-examples.component';
 import {
     TimePickerExampleComponent,
     TimePicker12ExampleComponent,
     TimePickerDisabledExampleComponent,
     TimePickerNoSecondsExampleComponent,
     TimePickerCompactExampleComponent,
-    TimePickerAllowNullExampleComponent
+    TimePickerAllowNullExampleComponent, TimePickerOnlyHoursExampleComponent
 } from './component-docs/time-picker/examples/time-picker-examples.component';
 import { TimePickerFormExampleComponent } from './component-docs/time-picker/examples/time-picker-form-example.component';
 import { ToggleDocsComponent } from './component-docs/toggle/toggle-docs.component';
@@ -620,13 +620,15 @@ import { RadioHeaderComponent } from './component-docs/radio/radio-header/radio-
         Time12ExampleComponent,
         TimeDisabledExampleComponent,
         TimeNoSecondsExampleComponent,
+        TimeOnlyHoursExampleComponent,
         TimeNoSpinnersExampleComponent,
         TimeI18nExampleComponent,
         TimeFormExampleComponent,
         TimePickerExampleComponent,
         TimePicker12ExampleComponent,
         TimePickerDisabledExampleComponent,
         TimePickerNoSecondsExampleComponent,
+        TimePickerOnlyHoursExampleComponent,
         TimePickerCompactExampleComponent,
         TimePickerOtherDelimiterExampleComponent,
         TimePickerAllowNullExampleComponent,

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

@@ -51,6 +51,8 @@
                          (ngModelChange)="handleTimeChange($event)"
                          [spinners]="spinners"
                          [displaySeconds]="displaySeconds"
+                         [displayMinutes]="displayMinutes"
+                         [displayHours]="displayHours"
                          (focusArrowLeft)="focusArrowLeft()"></fd-time>
             </div>
         </fd-popover-body>

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

@@ -107,6 +107,14 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
     @Input()
     displaySeconds: boolean = true;
 
+    /** Whether the time component shows minutes. */
+    @Input()
+    displayMinutes: boolean = true;
+
+    /** Whether the time component shows hours. */
+    @Input()
+    displayHours: boolean = true;
+
     /** Whether to perform visual validation on the picker input. */
     @Input()
     useValidation: boolean = true;

library/src/lib/time-picker/time-picker.component.html

@@ -27,12 +27,14 @@
         </span>
         </div>
     </fd-popover-control>
-    <fd-popover-body>
+    <fd-popover-body *ngIf="displaySeconds || displayMinutes || displayHours">
         <fd-time [disabled]="disabled"
                  [meridian]="meridian"
                  [(ngModel)]="time"
                  (ngModelChange)="timeFromTimeComponentChanged()"
                  [spinners]="spinners"
-                 [displaySeconds]="displaySeconds"></fd-time>
+                 [displayMinutes]="displayMinutes"
+                 [displaySeconds]="displaySeconds"
+                 [displayHours]="displayHours"></fd-time>
     </fd-popover-body>
 </fd-popover>

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

@@ -59,6 +59,14 @@ export class TimePickerComponent implements ControlValueAccessor, OnInit {
     @Input()
     displaySeconds: boolean = true;
 
+    /** @Input When set to false, hides the input for minutes. */
+    @Input()
+    displayMinutes: boolean = true;
+
+    /** @Input When set to false, hides the input for hours. */
+    @Input()
+    displayHours: boolean = true;
+
     /** Whether to perform visual validation on the picker input. */
     @Input()
     validate: boolean = true;

library/src/lib/time/time.component.html

@@ -1,4 +1,5 @@
-<div class="fd-time__item">
+<div *ngIf="displayHours"
+    class="fd-time__item">
     <div class="fd-time__control">
         <button *ngIf="spinners"
                 [ngClass]="{'is-disabled': disabled}"
@@ -30,7 +31,8 @@
     </div>
 </div>
 
-<div class="fd-time__item">
+<div *ngIf="displayMinutes"
+    class="fd-time__item">
     <div class="fd-time__control">
         <button *ngIf="spinners"
                 [ngClass]="{'is-disabled': disabled}"

library/src/lib/time/time.component.ts

@@ -49,6 +49,16 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
      */
     @Input() displaySeconds: boolean = true;
 
+    /** @Input When set to false, hides the input for minutes. */
+    @Input()
+    displayMinutes: boolean = true;
+
+    /**
+     * When set to false, hides the input for hours
+     */
+    @Input()
+    displayHours: boolean = true;
+
     /**
      * @Input An object that contains three integer properties: 'hour' (ranging from 0 to 23),
      * 'minute' (ranging from 0 to 59), and 'second' (ranging from 0 to 59). This is the model the component consumes. Example: