Angular Material DatePicker 不可见

Question

我正在尝试在我的项目中使用角度材料日期选择器。日期选择器本身是不可见的，但如果我单击它的位置或日历图标所在的位置，它就会起作用。为了清楚起见，我在日期选择器旁边添加了一个按钮。是什么导致日期选择器出现这样的行为？

为了清楚起见，我在日期选择器旁边添加了一个确实显示的按钮。

我的 HTML 文件：

<div>

  <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>

  <button mat-raised-button color="primary">Hello</button>

</div>

我的进口：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CoreModule} from './core/core.module';
import {SharedModule} from './shared/shared.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    SharedModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我也有同样的问题。我发现其中 2 个预构建主题被视为“浅色”（deeppurple-amber.css 和 indigo-pink.css），2 个被视为“深色”（pink-bluegrey.css 和 Purple-green.css）。

它们的工作原理只是浅色的在白色或彩色背景下可见，但不是黑色，深色的在黑色或彩色背景下可见，但不是白色。

您可以轻松尝试仅更改主体元素的背景颜色。

资源（均来自 Angular 文档）：

• 主题化您的 Angular Material 应用程序
• 主题角度材料

Answer 2

您可以避免使用日期选择器组件，而只需在用户单击您想要的任何位置时使用日历来选择日期。

turbogui-Angular 开源库以超级易用的方式封装了 mat-calendar 组件。首先将其安装到您的项目中：

npm install turbogui-angular

然后在需要的地方导入dialogService并调用addDateSelectionDialog：

import { DialogService } from 'turbogui-angular';

// Inject the required dialog service into your angular component
constructor(public dialogService: DialogService) {

}

// Call for the calendar date picker
this.dialogService.addDateSelectionDialog({
        width: '500px',
        title: "some title for the calendar dialog"
    }, (selectedDate) => {

    if(selectedDate !== null){

        console.log(selectedDate);
    }
});

将出现 mat-calendar 组件并让用户选择日期。

更多信息在这里：

https://turboframework.org/en/blog/2024-02-19/easily-show-material-calendar-with-angular-to-pick-date