底部显示角度的日期选择器答案

【问题标题】：Datepicker in angular shown at bottom底部显示角度的日期选择器
【发布时间】：2018-06-27 08:54:15
【问题描述】：

我在使用 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 {}

截图： Output I need (from example)

Output I am getting

【问题讨论】：

标签： html css angular angular-material2

【解决方案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>

【讨论】：