angular material date range

// Template <mat-form-field appearance="standard"> <mat-label>{{reportField.value.label}}</mat-label> <mat-date-range-input [rangePicker]="dateRangePicker"> <input matStartDate placeholder="Start date" #dateRangeStart> <input matEndDate placeholder="End date" #dateRangeEnd (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"> </mat-date-range-input> <mat-datepicker-toggle matPrefix [for]="dateRangePicker"> </mat-datepicker-toggle> <mat-date-range-picker #dateRangePicker></mat-date-range-picker> </mat-form-field>

<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime" placeholder="Date" show-todays-date="" minutes="true" min-date="date" show-icon="true" ng-model="dateTime" class=" dtp-no-msclear dtp-input md-input">

show date range on mat-calendar

providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: DefaultMatCalendarRangeStrategy,
    },
  ],
  
  // Then, you'd have to do some converting of Date to DateRange.
  
  selectedDateRange: DateRange<Date>;

  _onSelectedChange(date: Date): void {
    if (
      this.selectedDateRange &&
      this.selectedDateRange.start &&
      date > this.selectedDateRange.start &&
      !this.selectedDateRange.end
    ) {
      this.selectedDateRange = new DateRange(
        this.selectedDateRange.start,
        date
      );
    } else {
      this.selectedDateRange = new DateRange(date, null);
    }
  }
  
  
  <mat-calendar (selectedChange)="_onSelectedChange($event)"
                [selected]="selectedDateRange">
  </mat-calendar>

Posted by: Guest on January-18-2022

Source

Code answers related to "angular material date range"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "angular material date range"

Code answers related to "angular material date range"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us