@@ -21,7 +17,6 @@
[required]="bRequired$"
[formControl]="fieldControl"
(dateChange)="fieldOnDateChange($event)"
- (blur)="fieldOnBlur($event)"
/>
diff --git a/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts b/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts
index 8f2c5f6a..0242b9ff 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/field/date/date.component.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, Inject, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -87,6 +86,7 @@ export class DateComponent implements OnInit, OnDestroy {
theDateFormat = getDateFormatInfo();
actionsApi: Object;
propName: string;
+ formattedValue$: any;
constructor(
private angularPConnect: AngularPConnectService,
@@ -149,21 +149,7 @@ export class DateComponent implements OnInit, OnDestroy {
// moved this from ngOnInit() and call this from there instead...
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DateProps;
- if (this.configProps$.value != undefined) {
- let sDateValue: any = '';
- sDateValue = this.configProps$.value;
-
- if (sDateValue != '') {
- if (typeof sDateValue === 'object') {
- sDateValue = sDateValue.toISOString();
- } else if (sDateValue.indexOf('/') < 0) {
- // if we have the "pega" format, then for display, convert to standard format (US)
- // sDateValue = this.formatDate(sDateValue);
- sDateValue = this.utils.generateDate(sDateValue, 'Date-Long-Custom-YYYY');
- }
- this.value$ = new Date(sDateValue);
- }
- }
+ this.value$ = this.configProps$.value;
this.testId = this.configProps$.testId;
this.label$ = this.configProps$.label;
this.displayMode$ = this.configProps$.displayMode;
@@ -181,6 +167,12 @@ export class DateComponent implements OnInit, OnDestroy {
this.cdRef.detectChanges();
});
+ if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+ this.formattedValue$ = format(this.value$, 'date', {
+ format: this.theDateFormat.dateFormatString
+ });
+ }
+
if (this.configProps$.visibility != null) {
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
}
@@ -215,27 +207,13 @@ export class DateComponent implements OnInit, OnDestroy {
fieldOnDateChange(event: any) {
// this comes from the date pop up
- if (typeof event.value === 'object') {
- // convert date to pega "date" format
- event.value = event.value?.toISOString();
- }
- const value = event?.target?.value;
+ const value = event?.target?.value.format('YYYY-MM-DD');
handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
this.pConn$.clearErrorMessages({
property: this.propName
});
}
- fieldOnBlur(event: any) {
- // PConnect wants to use eventHandler for onBlur
- if (typeof event.value === 'object') {
- // convert date to pega "date" format
- event.value = event.value?.toISOString();
- }
- const value = event?.target?.value;
- handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
- }
-
hasErrors() {
return this.fieldControl.status === 'INVALID';
}
@@ -254,10 +232,4 @@ export class DateComponent implements OnInit, OnDestroy {
}
return errMessage;
}
-
- getFormattedValue() {
- return format(this.value$, 'date', {
- format: this.theDateFormat.dateFormatString
- });
- }
}
diff --git a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html
index 878ba6d3..d2c64cc1 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.html
@@ -1,5 +1,5 @@
-
+
diff --git a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts
index 47d137d2..ed6263ed 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts
@@ -9,6 +9,7 @@ import { Utils } from '../../../_helpers/utils';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
import { handleEvent } from '../../../_helpers/event-util';
+import { format } from '../../../_helpers/formatters';
interface TimeProps extends PConnFieldProps {
// If any, enter additional props that only exist on Time here
@@ -46,6 +47,7 @@ export class TimeComponent implements OnInit, OnDestroy {
fieldControl = new FormControl('', null);
actionsApi: Object;
propName: string;
+ formattedValue$: any;
constructor(
private angularPConnect: AngularPConnectService,
@@ -125,6 +127,12 @@ export class TimeComponent implements OnInit, OnDestroy {
this.cdRef.detectChanges();
});
+ if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+ this.formattedValue$ = format(this.value$, 'timeonly', {
+ format: 'hh:mm a'
+ });
+ }
+
if (this.configProps$.visibility != null) {
this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
}
diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts
index e2275278..e5aa98a7 100644
--- a/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts
+++ b/packages/angular-sdk-components/src/lib/_helpers/formatters/common.ts
@@ -7,7 +7,6 @@ export function getLocale(locale: string = '') {
return Intl.DateTimeFormat().resolvedOptions().locale;
}
-export function getCurrentTimezone(timezone: string = 'America/New_York') {
- if (timezone) return timezone;
- return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+export function getCurrentTimezone() {
+ return PCore?.getEnvironmentInfo?.().getTimeZone?.();
}
diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts
index 684bdc4e..a2d0bc75 100644
--- a/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts
+++ b/packages/angular-sdk-components/src/lib/_helpers/formatters/date.ts
@@ -37,7 +37,7 @@ function TimeFormatter(value, options) {
tempDate.setHours(hours);
tempDate.setMinutes(minutes);
tempDate.setSeconds(seconds);
- return tempDate.toLocaleTimeString(locale);
+ return tempDate.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
}
return DateFormatter(value, options);
}
@@ -53,9 +53,9 @@ export default {
'DateTime-Since': value => DateFormatter(value, { type: 'fromNow' }),
'Time-Only': (value, options) =>
TimeFormatter(value, {
- ...options,
type: 'customFormat',
- format: 'hh:mm:ss A'
+ format: 'hh:mm:ss A',
+ ...options
}),
convertToTimezone: (value, options) => {
return value && options && options.timezone
diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts
index 29cbe2cd..5eb27b82 100644
--- a/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts
+++ b/packages/angular-sdk-components/src/lib/_helpers/formatters/index.ts
@@ -10,8 +10,6 @@ export default {
};
function getDateObject(text): Date {
- if (text instanceof Date) return text;
-
// TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
const timeStamp = text.replace(/-/g, '');
const isDateTime = timeStamp.indexOf('GMT') !== -1;
@@ -120,6 +118,17 @@ export function format(value, type, options = {}): string {
break;
}
+ case 'timeonly': {
+ const defaultOptions = {
+ locale: getLocale(),
+ format: 'hh:mm A',
+ timezone: getCurrentTimezone()
+ };
+ const params = { ...defaultOptions, ...options };
+ formattedValue = DateFormatter['Time-Only'](value, params);
+ break;
+ }
+
default:
formattedValue = value;
}