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

• 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

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