Feat time picker display utc

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -4315,6 +4315,12 @@ export const ngdoc: any = {
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
+      },
+      {
+        "name": "useUtc",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true displays utc time instead of client time</p>\n"
       }
     ],
     "outputs": [
@@ -4458,6 +4464,12 @@ export const ngdoc: any = {
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
+      },
+      {
+        "name": "useUtc",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true displays utc time instead of client time</p>\n"
       }
     ]
   },

libs/doc-pages/timepicker/src/lib/demos/index.ts

@@ -12,6 +12,7 @@ import { DemoTimepickerIsValidComponent } from './isvalid/isvalid';
 import { DemoTimepickerMeridianComponent } from './meridian/meridian';
 import { DemoTimepickerMinMaxComponent } from './min-max/min-max';
 import { DemoTimepickerMousewheelComponent } from './mousewheel/mousewheel';
+import { DemoTimepickerUseUtcComponent } from './use-utc/use-utc';
 import { DemoTimepickerPlaceholderComponent } from './placeholder/placeholder';
 import { DemoTimepickerReadonlyComponent } from './readonly/readonly';
 import { DemoTimepickerSpinnersComponent } from './spinners/spinners';
@@ -31,6 +32,7 @@ export const DEMO_COMPONENTS = [
   DemoTimepickerToggleMinutesSecondsComponent,
   DemoTimepickerArrowkeysComponent,
   DemoTimepickerMousewheelComponent,
+  DemoTimepickerUseUtcComponent,
   DemoTimepickerCustomValidationComponent,
   DemoTimepickerIsValidComponent,
   DemoTimepickerCustomValidationComponent,

libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.html

@@ -0,0 +1,9 @@
+<timepicker [(ngModel)]="myTime" [useUtc]="useUtc"></timepicker>
+
+<div class="row my-3">
+  <div class="col-xs-6 col-6 col-md-4">
+    <button type="button" class="btn btn-info" (click)="useUtc = !useUtc">useUtc: {{useUtc}}</button>
+  </div>
+</div>
+
+<pre class="alert alert-info">Time is: {{myTime}}</pre>

libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-timepicker-use-utc',
+  templateUrl: './use-utc.html'
+})
+export class DemoTimepickerUseUtcComponent {
+  myTime: Date = new Date();
+  useUtc = false;
+}

libs/doc-pages/timepicker/src/lib/timepicker-section.list.ts

@@ -26,6 +26,7 @@ import {
 } from '@ngx-bootstrap-doc/docs';
 import { DemoTimepickerIsValidComponent } from './demos/isvalid/isvalid';
 import { DemoTimepickerFormComponent } from './demos/form/form';
+import { DemoTimepickerUseUtcComponent } from './demos/use-utc/use-utc';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -169,6 +170,15 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/config/config'),
         html: require('!!raw-loader!./demos/config/config.html'),
         outlet: DemoTimepickerConfigComponent
+      },
+      {
+        title: 'Use utc',
+        anchor: 'use-utc',
+        component: require('!!raw-loader!./demos/use-utc/use-utc'),
+        html: require('!!raw-loader!./demos/use-utc/use-utc.html'),
+        description: `<p><code>useUtc</code> can be used to display utc
+        time instead of client time.`,
+        outlet: DemoTimepickerUseUtcComponent
       }
     ]
   },

src/chronos/public_api.ts

@@ -10,7 +10,9 @@ isSameDay,
 isSameMonth,
 getFullYear,
 getFirstDayOfMonth,
-getMonth
+getMonth,
+getHours,
+getMinutes,
 } from './utils/date-getters';
 
 export { parseDate } from './create/local';

src/timepicker/reducer/timepicker.reducer.ts

@@ -113,7 +113,9 @@ export function timepickerReducer(state = initialState, action: Action) {
         controls: _newControlsState
       };
 
-      if (state.config.showMeridian !== _newState.config.showMeridian) {
+      if (state.config.showMeridian !== _newState.config.showMeridian ||
+        state.config.useUtc !== _newState.config.useUtc
+      ) {
         if (state.value) {
           _newState.value = new Date(state.value);
         }

src/timepicker/testing/timepicker-controls.util.spec.ts

@@ -36,7 +36,8 @@ describe('Util: Timepicker-controls', () => {
       showSpinners: true,
       showMeridian: true,
       showSeconds: false,
-      meridians: ['AM', 'PM']
+      meridians: ['AM', 'PM'],
+      useUtc: false
     };
 
     controls = {

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

@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import { fireEvent } from '../../../scripts/helpers';
 import '../../../scripts/jest/toHaveCssClass';
 import { TimepickerActions, TimepickerComponent, TimepickerConfig, TimepickerModule } from '../index';
+import { padNumber } from '../timepicker.utils';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getInputElements(fixture: any) {
@@ -1164,6 +1165,29 @@ describe('Component: TimepickerComponent', () => {
     }));
   });
 
+  describe('use utc', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      inputHours = getInputElements(fixture)[0];
+      inputMinutes = getInputElements(fixture)[1];
+      inputSeconds = getInputElements(fixture)[2];
+      buttonChanges = getElements(fixture, 'a.btn');
+      buttonMeridian = getElements(fixture, 'button')[0];
+    });
+
+    it('should show utc values instead of client values', () => {
+      const time = testTime(12, 0, 0);
+      component.useUtc = true;
+      component.writeValue(time);
+      fixture.detectChanges();
+      expect(inputHours.value).toBe(padNumber(time.getUTCHours()));
+      expect(inputMinutes.value).toBe(padNumber(time.getUTCMinutes()));
+    });
+  });
+
   describe('custom placeholders', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(TimepickerComponent);

src/timepicker/testing/timepicker.utils.spec.ts

@@ -33,7 +33,8 @@ const controls: TimepickerComponentState = {
   showSpinners: false,
   showMeridian: true,
   showSeconds: true,
-  meridians: ['AM', 'PM']
+  meridians: ['AM', 'PM'],
+  useUtc: false
 };
 
 function testTime(hours?: number, minutes?: number, seconds?: number): Date {

src/timepicker/timepicker-controls.util.ts

@@ -95,7 +95,8 @@ export function getControlsValue(
     showSeconds,
     meridians,
     min,
-    max
+    max,
+    useUtc
   } = state;
 
   return {
@@ -111,7 +112,8 @@ export function getControlsValue(
     showSeconds,
     meridians,
     min,
-    max
+    max,
+    useUtc
   };
 }
 

src/timepicker/timepicker.component.ts

@@ -10,6 +10,7 @@ import {
   Output,
   ViewEncapsulation
 } from '@angular/core';
+import { getHours, getMinutes } from 'ngx-bootstrap/chronos';
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -120,6 +121,8 @@ export class TimepickerComponent
   @Output() isValid = new EventEmitter<boolean>();
   /** emits value of meridian*/
   @Output() meridianChange = new EventEmitter<string>();
+  /** if true displays utc time instead of client time */
+  @Input() useUtc = false;
   // ui variables
   hours = '';
   minutes = '';
@@ -408,7 +411,8 @@ export class TimepickerComponent
     }
 
     const _hoursPerDayHalf = 12;
-    let _hours = _value.getHours();
+    let _hours = getHours(_value, this.useUtc);
+    const _minutes = getMinutes(_value, this.useUtc);
 
     if (this.showMeridian) {
       this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];
@@ -421,7 +425,7 @@ export class TimepickerComponent
     }
 
     this.hours = padNumber(_hours);
-    this.minutes = padNumber(_value.getMinutes());
+    this.minutes = padNumber(_minutes);
     this.seconds = padNumber(_value.getUTCSeconds());
   }
 }

src/timepicker/timepicker.config.ts

@@ -47,4 +47,6 @@ export class TimepickerConfig {
   ariaLabelMinutes = 'minutes';
   /** seconds aria label */
   ariaLabelSeconds = 'seconds';
+  /** if true displays utc time instead of client time */
+  useUtc = false;
 }

src/timepicker/timepicker.models.ts

@@ -36,6 +36,7 @@ export interface TimepickerComponentState {
   showSeconds: boolean;
 
   meridians: string[];
+  useUtc: boolean;
 }
 
 export type TimeChangeSource = 'wheel' | 'key' | '';