Merge pull request #23208 from abpframework/enhancement/date-picker-placement

Angular - Improved positioning for date picker

npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts

@@ -3,7 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   inject,
-  Input,
+  input,
   Optional,
   SkipSelf,
   ViewChild,
@@ -17,6 +17,7 @@ import {
   NgbTimeAdapter,
   NgbTimepicker,
   NgbTimepickerModule,
+  Placement,
 } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { DateTimeAdapter } from '@abp/ng.theme.shared';
@@ -35,8 +36,8 @@ import { selfFactory } from '../../utils/factory.util';
   selector: 'abp-extensible-date-time-picker',
   template: `
     <input
-      [id]="prop.id"
+      [id]="prop().id"
-      [formControlName]="prop.name"
+      [formControlName]="prop().name"
       (ngModelChange)="setTime($event)"
       (click)="datepicker.open()"
       (keyup.space)="datepicker.open()"
@@ -44,13 +45,14 @@ import { selfFactory } from '../../utils/factory.util';
       #datepicker="ngbDatepicker"
       type="text"
       class="form-control"
+      [placement]="placement()"
     />
     <ngb-timepicker
       #timepicker
-      [formControlName]="prop.name"
+      [formControlName]="prop().name"
       (ngModelChange)="setDate($event)"
-      [meridian]="meridian"
+      [meridian]="meridian()"
-    ></ngb-timepicker>
+    />
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
@@ -72,8 +74,9 @@ import { selfFactory } from '../../utils/factory.util';
 export class ExtensibleDateTimePickerComponent {
   public readonly cdRef = inject(ChangeDetectorRef);
 
-  @Input() prop!: FormProp;
+  prop = input<FormProp>();
-  @Input() meridian = false;
+  meridian = input<boolean>(false);
+  placement = input<Placement>('bottom-left');
 
   @ViewChild(NgbInputDatepicker) date!: NgbInputDatepicker;
   @ViewChild(NgbTimepicker) time!: NgbTimepicker;