One of the challenges I am facing is integrating two separate DatePickers in my Angular project to create a date range search functionality for my local database. I have set up an API to connect to the database and implemented forms to retrieve data. To tackle this issue, I created a child component with a DatePicker and then used it twice within the parent Component form. Here's a snippet of the Child Component:
date-range.component.html
<div class="input-group">
<input class="form-control mb-2 mr-sm-2" [name]="name"
placeholder="From date" value="" [(ngModel)]="model"
#dp="ngbDatepicker" ngbDatepicker>
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar mb-2 mr-sm-2" (click)="dp.toggle()"></button>
</div>
</div>
date-range.component.ts
@Component({
selector: 'app-date-range',
templateUrl: './date-range.component.html',
styleUrls: ['./date-range.component.css']
})
export class DateRangeComponent {
@Input() model: Date;
@Output() dateModel = new EventEmitter<Date>();
constructor() { }
onChange() {
this.dateModel.emit(this.model);
}
}
The Parent Component references the Child Component like so:
product-list.component.html
<app-date-range name="dp1" (dateModel)="dateModel($event)" [model]="model"
#productFromDate>
</app-date-range>
<app-date-range name="dp2" (dateModel)="dateModel($event)" [model]="model"
#productToDate>
</app-date-range>
<button (click)=
"searchProducts(productFromDate.value, productToDate.value);" type="submit" class="btn btn-primary">Search</button>
And the TypeScript code looks like this:
product-list.component.ts
export class ProductListComponent implements OnInit {
model: Date = null;
constructor(private productService: ProductService) { }
ngOnInit(): void {
// default search on page load
this.searchProducts('', '', '', '10');
}
dateModel(date: Date) {
this.model = date;
}
}
I have been struggling to pass the date values from the Child DatePickers to use them in my search method such as productFromDate.value. Any guidance or tips would be greatly appreciated as I am still relatively new to Angular, having worked with it for only three weeks.
Update:
I revamped the entire process using Angular Material Date-Picker and successfully utilized MatDatepickerInputEvent to achieve the desired functionality.