Recently, I successfully passed the dates from the component to the template date picker. My current dilemma is figuring out how to retrieve the value from the template (HTML) to the component (TS) file. Here's a snippet of the code:
startDate = new Date() || selected start date from date picker
endDate = new Date(2019, 1, 20) || selected end date form date pickerTypeScript:
export class AppComponent {
startDate = new Date();
endDate = new Date(2019, 1, 20);
form: FormGroup;
constructor(fb: FormBuilder) {
this.form = fb.group({
date: [{begin: this.startDate, end: this.endDate}]
});
}
}
HTML:
<form [formGroup]="form">
<mat-form-field>
<input matInput
placeholder="Choose a date"
[satDatepicker]="picker"
formControlName="date">
<sat-datepicker-toggle
matSuffix
[for]="picker">
</sat-datepicker-toggle>
<sat-datepicker
#picker
[rangeMode]="true"
touchUi="true">
</sat-datepicker>
</mat-form-field>
</form>
Initially, the date is passed by default, but my challenge lies in capturing the value when a different range is selected. I have attempted using ngModel but failed to retrieve the value from a variable. For reference, you can check out the Stackblitz project link below.