html - 底部显示的 Angular 日期选择器

标签 html css angular angular-material2

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

最佳答案

您的应用似乎缺少主题。控制台中还应该有一条警告,提示未找到默认主题。

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

相关文章:

javascript - 需要关闭下拉点击点击 body

python - 在没有外部库的情况下将 CSS 选择器转换为 python 中的 XPath 选择器

spring - 每次重新加载时 % 符号在 URL 中编码为 %25

html - Material Design WordPress 主题无法更改顶部栏颜色

javascript - 如何检查验证文本不是电子邮件?

javascript - 从 Bootstrap 表行生成表单

html - CSS 和 HTML 拆分容器

css - 我的 div 无法正确对齐。为什么?

angular - 对 Angular 2 应用程序进行版本控制

angular - 如何删除 ng2-smart-table 中的一行