主页 / coding / 问题 / 79421996
Accepted
infinitesimal
Asked: 2025-02-08 03:35:32 +0800 CST

日期范围输入角度材料

  • 772

为什么它看起来像在我的应用程序中，我无法管理如何更改填充/边距，有时第一个日期有适当的位置，有时第二个。

已填充日期选择器

占位符看起来也不像来自文档，从“输入日期范围”到“开始日期 - 结束日期”的动画与文档中的不一样：

在此处输入图片描述

这是我的代码（我从文档中复制了它）：

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

编辑。当您单击日期选择器并按“<-”和“->”键时，日期将调整到正确的位置。

angular

1 个回答

  1. Best Answer

    当第三方 CSS 规则覆盖了 Angular Material CSS 规则时，经常会出现问题。

    为了避免出现此问题，您可能需要styles按angular.json如下方式调整部分

     "styles": [
      ...
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      // Put the angular material css files at the bottom as possible 
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
    ],

    angular 将在生成的 css 文件中保持此顺序。因此，除非您有意在自己的库中覆盖它们，否则材料样式不会被其他库覆盖styles.css

    • 1

相关问题