我在使用 angular2 时遇到了日期选择器的问题。我尝试了 https://material.angular.io/components/datepicker/examples 中的代码.此站点中显示的输出是我需要的,但我得到的是页脚后页面底部显示的日历。示例中没有给出 CSS 更改。
我正在使用以下代码。
HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
TS:
import {Component} from '@angular/core';
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html',
styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}
最佳答案
您的应用似乎缺少主题。控制台中还应该有一条警告,提示未找到默认主题。
将以下行添加到您的全局样式表文件(很可能是 styles.css
):
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
或者:
<head>
<!-- Content goes here -->
<link rel="stylesheet" href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css">
<!-- More content goes here -->
</head>
关于html - 底部显示的 Angular 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48318676/