gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:28:06 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com