0

首先这个材质的datepicker是基于：https ://stackblitz.com/angular/qmnrlgabjly?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

我已经复制了我需要的所有代码：https://material.angular.io/components/datepicker/overview 但是选择年份和日期的弹出窗口总是定位错误（见下图）：

在此处输入图像描述

我的代码与示例完全相同，我的 scss 文件如下所示：

@import "../../../shared/styles/bootstrap/_variables.scss";
@import "../../../shared/styles/bootstrap/_mixins";
@import "../../../shared/styles/app/variables.scss";
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';
@import "~@angular/cdk/overlay-prebuilt.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.home-container {
    margin: 0 auto;
    max-width: map-get($container-max-widths, "lg");

    .home-logo {
        display: flex;
        justify-content: center;

        img {
            width: 240px;
        }
    }

    .home-text {
        text-align: center;

        @include media-breakpoint-up(lg) {
            text-align: left;
        }
    }

    .home-text-big {
        font-size: 3.9375rem;
    }


    
}
:host ::ng-deep .datatable-row-odd {
    background-color: #eee;
}


:host ::ng-deep .datatable-header {
    background-color: #f05050;
    padding: 0.5rem 0 0 0.5rem;
    font-size: 1.2rem;
}

:host ::ng-deep .datatable-body-cell {
    vertical-align: middle;
    padding: 0.5rem 0 0.5rem 0;
}

ol {
    font-size: 2.25rem;
}

#manualInput p {
    font-size: 1rem;
}

#allContent {
   display: none;
}

#ptags {
    font-size: 1rem;
}

ul{
    list-style: circle;
    padding: 0;
}

.secondLevel {
   font-size: 1.5rem;
}

.container {
    max-width: none;
}

input {
    width: 100%;
}

button {
    margin-bottom: 1rem !important;
    width: 7rem;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 3px solid #dc3545;
}

.example-month-picker .mat-calendar-period-button {
    pointer-events: none;
}

.example-month-picker .mat-calendar-arrow {
    display: none;
}

::ng-deep .mat-form-field-underline {
    visibility: visible;
    z-index: -999;
    display: block;
}

和 HTML：

<mat-form-field appearance="fill">
                    <input matInput [matDatepicker]="dp" [formControl]="date">
                    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
                    <mat-datepicker #dp [touchUi]="true" disabled="false"
                                    startView="multi-year"
                                    (yearSelected)="chosenYearHandler($event)"
                                    (monthSelected)="chosenMonthHandler($event, dp)"
                                    panelClass="example-month-picker">
                    </mat-datepicker>
                </mat-form-field>

弹出窗口实际上呈现在 App-root 之外，如下所示：

在此处输入图像描述

顺便说一句，mat-datepicker 本身在 app-root 内的某个位置是正确的，但是由于我无法控制弹出窗口，它会在外面定位。

有没有人有什么建议？如果您需要更多内容，请告诉我，我们会尽快回复！谢谢！

4

0 回答 0