Angular 13材料datepicker无法正确应用样式

发布于 2025-02-11 14:48:42 字数 1366 浏览 1 评论 0原文

我一直在尝试学习如何使用Angular 13 datepicker，而我不了解什么无法正常工作。

这是我的主要模块。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
  AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ...
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我使用的代码，基于此 tutorial> tutorial ：

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

这就是外观： 1

我不太了解我缺少的东西以及为什么看起来不应该这样。

谢谢！

原文

I've been trying to learn how to use angular 13 datepicker and I can't understand what is not working properly.

Here is my main module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
  AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ...
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the code that I used, based on this tutorial :

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

And this is how it looks like: 1

And I don't really understand what I am missing and why it doesn't look like it is supposed to.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扛刀软妹 2025-02-18 14:48:42

您需要导入要在材料组件中使用的主题。

例如，您可以

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

用于全局CSS。

也有一次问题。 - ＆gt; Angular 5材料2：datePickerStyle

更多关于预建立主题的信息更多信息 - ＆gt; https://v6.material.angular.angular.angular.io/指南/主题＃used-a-pre-built-theme

You need to import the theme you want to use within your material components.

For example you can use

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

for your global css.

Had the the problem once, too. --> Angular 5 Material 2: Datepickerstyle

More infos about the Prebuild themes --> https://v6.material.angular.io/guide/theming#using-a-pre-built-theme

回复收藏 0 原文

墨落画卷 2025-02-18 14:48:42

您可以检查所有CSS东西是否正确安装了角材料？是否添加了角度材料的内容，请检查您的style.css。
您的软件包文件中是否有 @angular/core。

您可以检查的另一件事是，您的datepicker是否被垫子形景色包裹。看起来应该这样：

<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>

Can you check if angular material is installed correctly with all the css stuff? Check your styles.css if the angular material stuff was added.
Do you have @angular/core in your package.json file?

Another thing you can check is if your datepicker is wrapped by a mat-form-field. It should look like this:

<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>

回复收藏 0 原文

~没有更多了~