Merge 6343ebe into 58a6e00

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

@@ -4136,6 +4136,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,3 @@
+<timepicker [(ngModel)]="myTime"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}</pre>

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { TimepickerConfig } from 'ngx-bootstrap/timepicker';
+
+export function getTimepickerConfig(): TimepickerConfig {
+  return Object.assign(new TimepickerConfig(), {
+    useUtc: true
+  });
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-timepicker-use-utc',
+  templateUrl: './use-utc.html',
+  providers: [{ provide: TimepickerConfig, useFactory: getTimepickerConfig }]
+})
+export class DemoTimepickerUseUtcComponent {
+  myTime: Date = new Date();
+}

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

@@ -25,6 +25,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[] = [
   {
@@ -161,6 +162,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/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) {
@@ -1187,6 +1188,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.config.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/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';
 
@@ -405,7 +406,8 @@ export class TimepickerComponent
     }
 
     const _hoursPerDayHalf = 12;
-    let _hours = _value.getHours();
+    let _hours = getHours(_value, this.config.useUtc);
+    const _minutes = getMinutes(_value, this.config.useUtc);
 
     if (this.showMeridian) {
       this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];
@@ -418,7 +420,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;
 }