diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts index 0d21723a6c1..be215ad41a6 100644 --- a/demo-shell/src/app/components/card-view/card-view.component.ts +++ b/demo-shell/src/app/components/card-view/card-view.component.ts @@ -114,17 +114,17 @@ export class CardViewComponent implements OnInit, OnDestroy { }), new CardViewDateItemModel({ label: 'CardView Date Item', - value: new Date(1983, 11, 24, 10, 0, 30), + value: new Date('1983-11-24T00:00:00Z'), key: 'date', - default: new Date(1983, 11, 24, 10, 0, 30), + default: new Date('1983-11-24T00:00:00Z'), format: 'shortDate', editable: this.isEditable }), new CardViewDateItemModel({ label: 'CardView Date Item - Multivalue (chips)', - value: [new Date(1983, 11, 24, 10, 0, 30)], + value: [new Date('1983-11-24T00:00:00Z')], key: 'date', - default: new Date(1983, 11, 24, 10, 0, 30), + default: new Date('1983-11-24T00:00:00Z'), format: 'shortDate', editable: this.isEditable, multivalued: true diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts index d917697ef5e..c6a8f8df95f 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts @@ -27,6 +27,7 @@ import { TranslationService } from '../../../translation/translation.service'; import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '../../../common/utils/date-fns-adapter'; import { ADF_DATETIME_FORMATS, AdfDateTimeFnsAdapter } from '../../../common/utils/datetime-fns-adapter'; import { isValid } from 'date-fns'; +import { DateFnsUtils } from '../../../common/utils/date-fns-utils'; @Component({ providers: [ @@ -99,10 +100,11 @@ export class CardViewDateItemComponent extends BaseCardView) { if (event.value) { if (isValid(event.value) && this.property.multivalued && Array.isArray(this.property.value)) { - const localDate = event.value; + let localDate = new Date(event.value); if (this.property.type === 'date') { - localDate.setHours(0, 0, 0, 0); + localDate = DateFnsUtils.forceUtc(event.value); } this.property.value.push(localDate); this.update(); @@ -148,11 +150,9 @@ export class CardViewDateItemComponent extends BaseCardView 0) { - this.property.value = this.property.value.map((date: Date) => { - const localDate = new Date(date); - if (this.property.type === 'date') { - localDate.setHours(0, 0, 0, 0); - } - return localDate; - }); - this.valueDate = this.property.value[0]; + this.property.value = this.property.value.map((date: Date | string) => new Date(date)); + this.valueDate = this.property.type === 'date' + ? DateFnsUtils.forceLocal(this.property.value[0]) + : this.property.value[0]; } } } diff --git a/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts b/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts index 9d1d99ad5f9..6ab949a1c8b 100644 --- a/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts +++ b/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts @@ -20,6 +20,7 @@ import { DynamicComponentModel } from '../../common/services/dynamic-component-m import { CardViewBaseItemModel } from './card-view-baseitem.model'; import { CardViewDateItemProperties } from '../interfaces/card-view.interfaces'; import { LocalizedDatePipe } from '../../pipes/localized-date.pipe'; +import { DateFnsUtils } from '../../common/utils/date-fns-utils'; type DateItemType = Date | Date[] | null; @@ -40,18 +41,19 @@ export class CardViewDateItemModel extends CardViewBaseItemModel i if (cardViewDateItemProperties.locale) { this.locale = cardViewDateItemProperties.locale; } - } get displayValue(): string | string[] { if (this.multivalued) { if (this.value && Array.isArray(this.value)) { - return this.value.map((date) => this.transformDate(date)); + return this.value.map((date) => this.transformDate(this.prepareDate(date))); } else { return this.default ? [this.default] : []; } } else { - return this.value && !Array.isArray(this.value) ? this.transformDate(this.value) : this.default; + return this.value && !Array.isArray(this.value) + ? this.transformDate(this.prepareDate(this.value)) + : this.default; } } @@ -59,4 +61,8 @@ export class CardViewDateItemModel extends CardViewBaseItemModel i this.localizedDatePipe = new LocalizedDatePipe(); return this.localizedDatePipe.transform(value, this.format, this.locale); } + + private prepareDate(date: Date): Date { + return this.type === 'date' ? DateFnsUtils.forceLocal(date) : date; + } } diff --git a/lib/core/src/lib/common/utils/date-fns-utils.ts b/lib/core/src/lib/common/utils/date-fns-utils.ts index ceb0db9cfce..a2ad06e4869 100644 --- a/lib/core/src/lib/common/utils/date-fns-utils.ts +++ b/lib/core/src/lib/common/utils/date-fns-utils.ts @@ -15,9 +15,10 @@ * limitations under the License. */ -import { format, parse, parseISO, isValid, isBefore, isAfter } from 'date-fns'; +import { format, parse, parseISO, isValid, isBefore, isAfter, lightFormat } from 'date-fns'; import { ar, cs, da, de, enUS, es, fi, fr, it, ja, nb, nl, pl, ptBR, ru, sv, zhCN } from 'date-fns/locale'; + export class DateFnsUtils { static getLocaleFromString(locale: string): Locale { let dateFnsLocale: Locale; @@ -201,4 +202,13 @@ export class DateFnsUtils { static localToUtc(date: Date): Date { return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); } + + static forceLocal(date: Date): Date { + return new Date(lightFormat(date, 'yyyy-MM-dd')); + } + + static forceUtc(date: Date): Date { + return new Date(lightFormat(date, 'yyyy-MM-dd').concat('T00:00:00.000Z')); + } + }