Highlight a particular week of a particular month in angular material DatePicker

Question

I saw this example in the official website of angular material

https://stackblitz.com/angular/xxjleavorkm?file=src%2Fapp%2Fdatepicker-date-class-example.ts

How to select the dates dynamically like If I have scheduled a meeting of say October from date 7 to 14 how to highlight the days for it.

There is a class called DateRange in the api but how to use it where to bind it?

There are examples only showing the angular materials Date Range picker integration with the input fields with form controls labelled as 'start' and 'end' that are probably taking the inputs of the date range but in my case I want to provide the predefined input from the backend like I would be having a start date and end date which i need to set directly in the date range picker.

P.S Also tried with saturn date Range picker but its confusing having lot more modules and dependencies to be added.

A stackblitz example would be appreciated..!!

Stigmasterol

you have to tell us what you have tried for us to be able to help! :) godspeed – Osteogenesis

the function dateClass is a function that received as argument a Date and return a string with the class (it's executed, when we change the month, for each day). the only is put the condition to return a string with the name of the class if cellDate meets your condition. NOTE: Don't forget put the class in the styles.css -not in the component.css – Eligible

@FranciscoSantorelli, I saw DateRange class in the Angular material Api but over www I couldn't find a straight away example which could crack the explanation of how exactly to give range to angular materials Date Range picker :) There are examples only showing the integration with the Input fields mapped but unfortunately that don't fulfill my needs. Let me know if you need anything more.Also Looked for the saturn-datepicker but was hard to input module dependencies. – Stigmasterol

Updated the question with my inputs :) – Stigmasterol

Answer 1

In Stackblitz, change here like this.

      return (date > 1 && date < 20) ? 'example-custom-date-class' : '';

Edit:

So, you are looking for a date range selector.

https://stackblitz.com/angular/ovmarbmryxd?file=src%2Fapp%2Fdate-range-picker-overview-example.ts

EDIT 2:

You can use formControlName to get the value of selected dates.

There is another working example.

<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-datepicker-toggle matSuffix [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>

<p>Selected range: {{range.value | json}}</p>

Cota

Hi thanks for the hint but how to select particular month like 20 days of January? as I want to select the specific days of particular month. – Stigmasterol

yes this will work for me but how can I set static values? like a I have planned a meeting from 6th oct to 12 th oct so I want to set here predefined values any clues here will get my work done as I will hide the date ranger inputs or rather will disable them. – Stigmasterol

It would be great if you provide how to set and get values from it..!! this is actually I want..!! – Stigmasterol

I updated the answer. You can check the second edit. – Cota

I am totally aware about this example but my question is I want to set range without using form inputs.... just I will have is the two dates from the backend and I need to show the selected range but I wont keep inputs there...!!😊 – Stigmasterol