Angular 10：日期范围选择器 - 日历在错误的位置打开

Question

我想在 Angular10. 中使用新的 日期选择器

我已将 Angular 成功升级到 Angular 10。然后我从第一个示例 here.

复制了 html 代码
日历弹出窗口应该看起来像这样：

(当你点击示例的link时，可能你需要向上滚动才能找到第一个示例。如果你点击右边的<>你可以看到后面的代码例如。)

我将示例中的 html 代码复制到我的一个组件中，它现在看起来像这样（在 Chrome 和 Firefox 中试过）：

黑条是我页面的侧边栏，与dat-picker无关。但当然，弹出窗口应该放在更靠右、更靠下的位置。它看起来也与示例非常不同。

在示例中他们没有使用任何额外的 CSS，为什么我的弹出窗口看起来如此不同？为什么总是放错位置，我能改一下吗？

基本功能正常，您可以选择日期。但是看起来很糟糕。

我删除了我所有的 CSS 和 Bootstrap 以及其他样式表 link，但看起来更糟：

现在日历弹出窗口的位置更糟，两者之间存在巨大差距。

但正如我所说，在示例中使用 html 代码就足够了，不需要 css。我做错了什么？

这是我复制的示例中的 html 代码：

<mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

这是示例中的打字稿代码（我没有更改我的组件的 ts 代码，因为我没有看到这里有什么特别的地方:)

import {Component} from '@angular/core'; /** @title Basic datepicker */ @Component({ selector: 'datepicker-overview-example', templateUrl: 'datepicker-overview-example.html', styleUrls: ['datepicker-overview-example.css'], }) export class DatepickerOverviewExample {}

此外，为了在我的页面上实现运行，我必须安装 @angular/cdk 和 @angular/material，然后将大量内容导入到我的 app.module.ts 文件中。不知道这样正常吗？如果没有这些导入，它甚至不会启动，因为日期选择器 html 代码会抛出很多错误。

import {A11yModule} from '@angular/cdk/a11y'; import {ClipboardModule} from '@angular/cdk/clipboard'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {PortalModule} from '@angular/cdk/portal'; import {ScrollingModule} from '@angular/cdk/scrolling'; import {CdkStepperModule} from '@angular/cdk/stepper'; import {CdkTableModule} from '@angular/cdk/table'; import {CdkTreeModule} from '@angular/cdk/tree'; import {MatBadgeModule} from '@angular/material/badge'; import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatChipsModule} from '@angular/material/chips'; import {MatStepperModule} from '@angular/material/stepper'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatDialogModule} from '@angular/material/dialog'; import {MatDividerModule} from '@angular/material/divider'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatIconModule} from '@angular/material/icon'; import {MatInputModule} from '@angular/material/input'; import {MatListModule} from '@angular/material/list'; import {MatMenuModule} from '@angular/material/menu'; import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatSliderModule} from '@angular/material/slider'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatSortModule} from '@angular/material/sort'; import {MatTableModule} from '@angular/material/table'; import {MatTabsModule} from '@angular/material/tabs'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTreeModule} from '@angular/material/tree'; HttpClientModule @NgModule({ imports: [ BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, A11yModule, ClipboardModule, CdkStepperModule, CdkTableModule, CdkTreeModule, DragDropModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatStepperModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule, PortalModule, ScrollingModule ]

在我找到第一个示例的教程页面中，没有关于这些必要的导入的内容。我只找到了它们 here in this stackblitz example.

为什么要导入所有这些，我是否正确导入了它们？ 抱歉，顺便问了这么长的问题！

Answer 1

好的，我应该先通读 Angular Material getting started guide :D 我试图按照他们页面上的示例进行操作，因此运行命令：

ng add @angular/material

这是丢失的东西，现在看起来应该是：

编辑：我解决了原来的问题，但我仍然对所有这些导入感到疑惑？如有任何评论，我们将不胜感激。

Answer 2

解决您的问题的两件事：

正如您已经提到的，需要添加 @angular/material 以使用 Angular Material 中的所有组件并添加默认样式。
这些是 material-module.ts 中您的日期范围选择器所需的唯一导入：

import {NgModule} from '@angular/core';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatDatepickerModule,
    MatInputModule
  ]
})
export class DemoMaterialModule {}

这是因为日期范围包含在 mat-form-field 输入中，因此您需要导入此特定模块。其余导入仅用于演示目的，您的案例不需要。 See this updated StackBlitz 使用更新的 Material 模块。

Angular 10：日期范围选择器 - 日历在错误的位置打开

Angular 10: Date range picker - calender opens at wrong place

datepicker

typescript

angular