Question

我正面临着一个问题，我使用的是针对angular2的datepicker。我尝试了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 {}

截图： Output I need (from example)

Output I am getting

Answer 1

看起来你错过了应用的主题。控制台中还应该发出警告，没有找到默认主题。

将以下行添加到全局样式表文件中（很可能是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>

角度显示在底部的Datepicker

1 个答案: