angular - 打开时Angular2 Ng日期时间选择器太大
问题描述
我正在使用带有 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;
app.module.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';
有什么想法可以解决这个问题吗?
解决方案
试试这个解决方案:
添加@import "~ng-pick-datetime/assets/style/picker.min.css";
style.scss
推荐阅读
- go - 使用嵌套地图编写 Terraform 提供程序
- java - 如何获取 Java 应用程序通信的端口列表
- angular - GeoJson 不能使用 Bing Map 在 Angular 中工作
- stripe-payments - 是否建议提供 ID 或让条带处理
- php - 从购物车中隐藏 WooCommerce 产品类别的“删除项目”
- database - sqlite 索引是否通过存储 int 列的最大值和最小值进行优化?
- java - 打印返回相同变量的不同值的不同方法?
- c++ - Windows 线程池,“PTP_CALLBACK_INSTANCE”:未声明的标识符
- python - Python 3 - 以电子表格格式打印到控制台,以便我可以剪切和粘贴列
- c++ - 调用 glDrawArrays 后的 SegFault