Currently utilizing Bootstrap in my Angular Application and the structure is organized as follows
Displayed below is my Datepicker.html file
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>This constitutes my dedicated Datepicker.ts file
import { Component, OnInit } from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-datepicker-basic',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent implements OnInit {
model: NgbDateStruct;
date: {year: number, month: number};
constructor(private calendar: NgbCalendar) {
}
selectToday() {
this.model = this.calendar.getToday();
}
ngOnInit(): void {
}
}
The primary objective involves extracting the selected date from the datepicker component and transmitting it to the dayoverview component
Dayoverview.ts
import { Component, OnInit } from '@angular/core';
import { ɵangular_packages_core_testing_testing_a } from '@angular/core/testing';
import { PATIENTS } from './dummypatientdata';
@Component({
selector: 'app-dayoverview',
templateUrl: './dayoverview.component.html',
styleUrls: ['./dayoverview.component.css']
})
export class DayoverviewComponent implements OnInit {
patients = PATIENTS;
constructor() { }
ngOnInit(): void {
}
}
The Datepicker functions as a child component within the day overview.