Angular2 Ng 日期时间选择器打开时太大

Question

我在 Angular2 前端使用 Ng 日期时间选择器，来自: https://danielykpan.github.io/date-time-picker/?utm_source=recordnotfound.com 我试图从这里复制并粘贴示例: https://stackblitz.com/github/DanielYKPan/owl-examples/tree/date-time-picker?file=src%2Fmain.ts

进入我的组件 html 文件。我正在使用 ngx-admin 模板。

但是，当我启动我的组件并在输入字段内单击以打开日期选择器时，布局有点“困惑”并且左侧窗口太大(参见屏幕截图):

但我没有在我的代码中看到任何错误...这是我的模板:

 <label class="example-input-wrapper">
    Date Time:
    <input placeholder="Date Time:"
           [(ngModel)]="dateTime"
           [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
    <owl-date-time #dt></owl-date-time>
</label>

组件.ts:

public dateTime: Date;

应用程序模块.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexibilitiesComponent } from './flexibilities.component';
import { ThemeModule } from '../../@theme/theme.module';
import { NgxEchartsModule } from "ngx-echarts";
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
import { AngularDateTimePickerModule } from 'angular2-datetimepicker';
import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { MomentModule } from 'angular2-moment';


@NgModule({
  imports: [
    CommonModule,
    ThemeModule,
    NgxEchartsModule,
    NgxChartsModule,
    DlDateTimePickerDateModule,
    AngularDateTimePickerModule,
    NguiDatetimePickerModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    MomentModule,
  ],
  declarations: [FlexibilitiesComponent] 
})
export class FlexibilitiesModule { }

在 stackblitz，他们使用了更多模块，但我不知道它们是特定于应用程序的还是需要运行日期时间选择器...:

import { BasicComponent } from './basic/basic.component';
import { StandAloneComponent } from './stand-alone/stand-alone.component';
import { RangeComponent } from './range/range.component';
import { StartViewComponent } from './start-view/start-view.component';
import { ValidationComponent } from './validation/validation.component';
import { RestrictionComponent } from './restriction/restriction.component';
import { LocalizationComponent } from './localization/localization.component';
import { MomentJsComponent } from './moment-js/moment-js.component';

有什么办法可以解决这个问题吗？

Answer 1

试试这个解决方案:

在style.scss中添加@import "~ng-pick-datetime/assets/style/picker.min.css";