From 2759ac6756f4e1e034bdd5f6f1ae8e2a30d4a6fe Mon Sep 17 00:00:00 2001 From: sashaqred Date: Wed, 6 Apr 2022 19:02:22 +0400 Subject: [PATCH 1/5] fix: fix initial value render in date time picker --- .../datepicker/date-timepicker.component.ts | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts index 0001198baf..7a9630a137 100644 --- a/src/framework/theme/components/datepicker/date-timepicker.component.ts +++ b/src/framework/theme/components/datepicker/date-timepicker.component.ts @@ -32,9 +32,10 @@ import { NB_DATE_SERVICE_OPTIONS } from './datepicker.directive'; template: '', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NbDateTimePickerComponent extends NbBasePickerComponent> - implements OnInit { - +export class NbDateTimePickerComponent + extends NbBasePickerComponent> + implements OnInit +{ protected pickerClass: Type> = NbCalendarWithTimeComponent; get value(): any { @@ -112,19 +113,22 @@ export class NbDateTimePickerComponent extends NbBasePickerComponent; } - constructor(@Inject(NB_DOCUMENT) document, - positionBuilder: NbPositionBuilderService, - triggerStrategyBuilder: NbTriggerStrategyBuilderService, - overlay: NbOverlayService, - cfr: ComponentFactoryResolver, - dateService: NbDateService, - @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, - protected calendarWithTimeModelService: NbCalendarTimeModelService) { + constructor( + @Inject(NB_DOCUMENT) document, + positionBuilder: NbPositionBuilderService, + triggerStrategyBuilder: NbTriggerStrategyBuilderService, + overlay: NbOverlayService, + cfr: ComponentFactoryResolver, + dateService: NbDateService, + @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, + protected calendarWithTimeModelService: NbCalendarTimeModelService, + ) { super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, dateService, dateServiceOptions); } ngOnInit() { this.format = this.format || this.buildTimeFormat(); + this.init$.next(); } protected patchWithInputs() { @@ -140,8 +144,9 @@ export class NbDateTimePickerComponent extends NbBasePickerComponent extends NbBasePickerComponent Date: Wed, 6 Apr 2022 19:03:30 +0400 Subject: [PATCH 2/5] chore: add showcase for initial value in date-time picker --- src/app/playground-components.ts | 6 +++++ ...r-with-initial-value-showcase.component.ts | 24 +++++++++++++++++++ .../datepicker/datepicker-routing.module.ts | 11 ++++++--- .../datepicker/datepicker.module.ts | 2 ++ 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 62c75f7165..786675f8cf 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -568,6 +568,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'DatepickerFilterComponent', name: 'Datepicker Filter', }, + { + path: 'date-timepicker-with-initial-value-showcase.component', + link: '/datepicker/date-timepicker-with-initial-value-showcase.component', + component: 'DateTimepickerWithInitialValueShowcaseComponent', + name: 'Date Timepicker With Initial Value Showcase', + }, ], }, { diff --git a/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts b/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts new file mode 100644 index 0000000000..7c49773aab --- /dev/null +++ b/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts @@ -0,0 +1,24 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'npg-date-timepicker-with-initial-value-showcase', + template: ` + + + + + + + `, + styleUrls: ['./datepicker-example.scss'], +}) +export class DateTimepickerWithInitialValueShowcaseComponent { + control = new FormControl(new Date()); +} diff --git a/src/playground/with-layout/datepicker/datepicker-routing.module.ts b/src/playground/with-layout/datepicker/datepicker-routing.module.ts index fe724caef1..fe1b3acd88 100644 --- a/src/playground/with-layout/datepicker/datepicker-routing.module.ts +++ b/src/playground/with-layout/datepicker/datepicker-routing.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { RouterModule, Route} from '@angular/router'; +import { RouterModule, Route } from '@angular/router'; import { DatepickerFormsComponent } from './datepicker-forms.component'; import { DatepickerShowcaseComponent } from './datepicker-showcase.component'; import { DatepickerValidationComponent } from './datepicker-validation.component'; @@ -13,6 +13,7 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; +import { DateTimepickerWithInitialValueShowcaseComponent } from './date-timepicker-with-initial-value-showcase.component'; const routes: Route[] = [ { @@ -43,10 +44,14 @@ const routes: Route[] = [ path: 'datepicker-filter.component', component: DatepickerFilterComponent, }, + { + path: 'date-timepicker-with-initial-value-showcase.component', + component: DateTimepickerWithInitialValueShowcaseComponent, + }, ]; @NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ], + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], }) export class DatepickerRoutingModule {} diff --git a/src/playground/with-layout/datepicker/datepicker.module.ts b/src/playground/with-layout/datepicker/datepicker.module.ts index 5a0f3997ca..c3815be293 100644 --- a/src/playground/with-layout/datepicker/datepicker.module.ts +++ b/src/playground/with-layout/datepicker/datepicker.module.ts @@ -15,6 +15,7 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; +import { DateTimepickerWithInitialValueShowcaseComponent } from './date-timepicker-with-initial-value-showcase.component'; @NgModule({ declarations: [ @@ -25,6 +26,7 @@ import { DatepickerFilterComponent } from './datepicker-filter.component'; DatepickerValidationComponent, RangepickerShowcaseComponent, DatepickerFilterComponent, + DateTimepickerWithInitialValueShowcaseComponent, ], imports: [ FormsModule, From 2790ee1c9b3ee2eee9259e0ca451efe14b7e4d44 Mon Sep 17 00:00:00 2001 From: sashaqred Date: Wed, 6 Apr 2022 19:26:43 +0400 Subject: [PATCH 3/5] Revert "chore: add showcase for initial value in date-time picker" This reverts commit 6f703e0ffd3063b4a09056de54b8bf8c20e67d6e. --- src/app/playground-components.ts | 6 ----- ...r-with-initial-value-showcase.component.ts | 24 ------------------- .../datepicker/datepicker-routing.module.ts | 11 +++------ .../datepicker/datepicker.module.ts | 2 -- 4 files changed, 3 insertions(+), 40 deletions(-) delete mode 100644 src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 786675f8cf..62c75f7165 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -568,12 +568,6 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'DatepickerFilterComponent', name: 'Datepicker Filter', }, - { - path: 'date-timepicker-with-initial-value-showcase.component', - link: '/datepicker/date-timepicker-with-initial-value-showcase.component', - component: 'DateTimepickerWithInitialValueShowcaseComponent', - name: 'Date Timepicker With Initial Value Showcase', - }, ], }, { diff --git a/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts b/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts deleted file mode 100644 index 7c49773aab..0000000000 --- a/src/playground/with-layout/datepicker/date-timepicker-with-initial-value-showcase.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -import { Component } from '@angular/core'; -import { FormControl } from '@angular/forms'; - -@Component({ - selector: 'npg-date-timepicker-with-initial-value-showcase', - template: ` - - - - - - - `, - styleUrls: ['./datepicker-example.scss'], -}) -export class DateTimepickerWithInitialValueShowcaseComponent { - control = new FormControl(new Date()); -} diff --git a/src/playground/with-layout/datepicker/datepicker-routing.module.ts b/src/playground/with-layout/datepicker/datepicker-routing.module.ts index fe1b3acd88..fe724caef1 100644 --- a/src/playground/with-layout/datepicker/datepicker-routing.module.ts +++ b/src/playground/with-layout/datepicker/datepicker-routing.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { RouterModule, Route } from '@angular/router'; +import { RouterModule, Route} from '@angular/router'; import { DatepickerFormsComponent } from './datepicker-forms.component'; import { DatepickerShowcaseComponent } from './datepicker-showcase.component'; import { DatepickerValidationComponent } from './datepicker-validation.component'; @@ -13,7 +13,6 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; -import { DateTimepickerWithInitialValueShowcaseComponent } from './date-timepicker-with-initial-value-showcase.component'; const routes: Route[] = [ { @@ -44,14 +43,10 @@ const routes: Route[] = [ path: 'datepicker-filter.component', component: DatepickerFilterComponent, }, - { - path: 'date-timepicker-with-initial-value-showcase.component', - component: DateTimepickerWithInitialValueShowcaseComponent, - }, ]; @NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], + imports: [ RouterModule.forChild(routes) ], + exports: [ RouterModule ], }) export class DatepickerRoutingModule {} diff --git a/src/playground/with-layout/datepicker/datepicker.module.ts b/src/playground/with-layout/datepicker/datepicker.module.ts index c3815be293..5a0f3997ca 100644 --- a/src/playground/with-layout/datepicker/datepicker.module.ts +++ b/src/playground/with-layout/datepicker/datepicker.module.ts @@ -15,7 +15,6 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; -import { DateTimepickerWithInitialValueShowcaseComponent } from './date-timepicker-with-initial-value-showcase.component'; @NgModule({ declarations: [ @@ -26,7 +25,6 @@ import { DateTimepickerWithInitialValueShowcaseComponent } from './date-timepick DatepickerValidationComponent, RangepickerShowcaseComponent, DatepickerFilterComponent, - DateTimepickerWithInitialValueShowcaseComponent, ], imports: [ FormsModule, From 59bcfc64c22da05dd7b4979325fbf7d7b9f92511 Mon Sep 17 00:00:00 2001 From: sashaqred Date: Wed, 6 Apr 2022 19:26:52 +0400 Subject: [PATCH 4/5] Revert "fix: fix initial value render in date time picker" This reverts commit 2759ac6756f4e1e034bdd5f6f1ae8e2a30d4a6fe. --- .../datepicker/date-timepicker.component.ts | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts index 7a9630a137..0001198baf 100644 --- a/src/framework/theme/components/datepicker/date-timepicker.component.ts +++ b/src/framework/theme/components/datepicker/date-timepicker.component.ts @@ -32,10 +32,9 @@ import { NB_DATE_SERVICE_OPTIONS } from './datepicker.directive'; template: '', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NbDateTimePickerComponent - extends NbBasePickerComponent> - implements OnInit -{ +export class NbDateTimePickerComponent extends NbBasePickerComponent> + implements OnInit { + protected pickerClass: Type> = NbCalendarWithTimeComponent; get value(): any { @@ -113,22 +112,19 @@ export class NbDateTimePickerComponent return this.valueChange as EventEmitter; } - constructor( - @Inject(NB_DOCUMENT) document, - positionBuilder: NbPositionBuilderService, - triggerStrategyBuilder: NbTriggerStrategyBuilderService, - overlay: NbOverlayService, - cfr: ComponentFactoryResolver, - dateService: NbDateService, - @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, - protected calendarWithTimeModelService: NbCalendarTimeModelService, - ) { + constructor(@Inject(NB_DOCUMENT) document, + positionBuilder: NbPositionBuilderService, + triggerStrategyBuilder: NbTriggerStrategyBuilderService, + overlay: NbOverlayService, + cfr: ComponentFactoryResolver, + dateService: NbDateService, + @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions, + protected calendarWithTimeModelService: NbCalendarTimeModelService) { super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, dateService, dateServiceOptions); } ngOnInit() { this.format = this.format || this.buildTimeFormat(); - this.init$.next(); } protected patchWithInputs() { @@ -144,9 +140,8 @@ export class NbDateTimePickerComponent if (this.twelveHoursFormat) { this.picker.timeFormat = this.dateService.getTwelveHoursFormat(); } else { - this.picker.timeFormat = this.withSeconds - ? this.dateService.getTwentyFourHoursFormatWithSeconds() - : this.dateService.getTwentyFourHoursFormat(); + this.picker.timeFormat = this.withSeconds ? this.dateService.getTwentyFourHoursFormatWithSeconds() : + this.dateService.getTwentyFourHoursFormat(); } super.patchWithInputs(); @@ -173,3 +168,4 @@ export class NbDateTimePickerComponent } } } + From 30924b271021e9b5cef9fac70626ae7951f66b33 Mon Sep 17 00:00:00 2001 From: sashaqred Date: Wed, 6 Apr 2022 19:28:36 +0400 Subject: [PATCH 5/5] fix: fix initial value render in date time picker --- .../theme/components/datepicker/date-timepicker.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts index 0001198baf..5b82d2a626 100644 --- a/src/framework/theme/components/datepicker/date-timepicker.component.ts +++ b/src/framework/theme/components/datepicker/date-timepicker.component.ts @@ -125,6 +125,7 @@ export class NbDateTimePickerComponent extends NbBasePickerComponent