Date range input angular material - Stack Overflow

admin管理员组

文章数量:1221766

Why does it look like in my app, I can't managed how to change that padding/margin, sometimes the first date has proper possition sometimes second.

also placeholders don't look like from documentation, the animation from "Enter a date range" to "Start date - End date" isn't the same as documentation present:

This is my code (I copied it from documentation):

<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>

Edit. When you click on the date selector and press the “<-” and “->” keys, the dates are adjusted to the correct position.

Why does it look like in my app, I can't managed how to change that padding/margin, sometimes the first date has proper possition sometimes second.

also placeholders don't look like from documentation, the animation from "Enter a date range" to "Start date - End date" isn't the same as documentation present:

This is my code (I copied it from documentation):

<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>

Edit. When you click on the date selector and press the “<-” and “->” keys, the dates are adjusted to the correct position.

• angular
• angular-material

Share Improve this question Follow edited Feb 7 at 20:05 infinitesimal asked Feb 7 at 19:35 infinitesimalinfinitesimal 44077 silver badges2020 bronze badges 3

• 1 Could you try to add material css files at the end of the styles in the angular json ? – Teoman Tıngır Commented Feb 8 at 0:14
• Yes, that was it. I'm also using materialize.css and both somehow collide with each other. When I remove materialize.css, the input works as per the documentation. – infinitesimal Commented Feb 8 at 14:30
• 1 I am adding as answer @infinitesimal – Teoman Tıngır Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Problem oftenly occurs when 3.rd party css rules override the angular material css rules.

In order to avoid the problem you might want to adjust the styles section in angular.json as follows

 "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",
    ],

This order will be maintained in the generated css files by angular. Thus material styles won't be overrided by another library unless you intentionally override them in your own styles.css

本文标签： Date range input angular materialStack Overflow