I'm trying to create a table which will display some info. The columns will be dynamically changing according to the selected date range.
I'm using Date range picker with custom a selection strategy from Angular Material Documentation (link), but I don't know how can I get values of each day that is within selected range. Here's how it works: StackBlitz Example
My code is pretty much the same as in doc example:
HTML:
<div class="datepick">
<mat-form-field appearance="outline">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
.TS:
@Injectable()
export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
constructor(private _dateAdapter: DateAdapter<D>) {}
selectionFinished(date: D | null): DateRange<D> {
return this._createFiveDayRange(date);
}
createPreview(activeDate: D | null): DateRange<D> {
return this._createFiveDayRange(activeDate);
}
private _createFiveDayRange(date: D | null): DateRange<D> {
if (date) {
const start = this._dateAdapter.addCalendarDays(date, -2);
const end = this._dateAdapter.addCalendarDays(date, 2);
return new DateRange<D>(start, end);
}
return new DateRange<D>(null, null);
}
}
@Component({
selector: 'app-table-view',
templateUrl: './table-view.component.html',
styleUrls: ['./table-view.component.css'],
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FiveDayRangeSelectionStrategy,
},
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
],})
export class TableViewComponent{}
Any form of help will be greatly appreciated :)
Just stumbled on the same problem but could figure out a way.
The way i see it you have 2 options, either you do it like in the Angular Material Documentation via a FormGroup or you just bidirectionally bind a variable and listen on the close.
and somewhere you put in your picker with the close listener...
in your component you can now listen and output your variables (in my case input variables).
Have fun coding!
EDIT: removed useless style stuff.
EDIT2: variables + clarification