This is a reusable Angular component for a datepicker input. This component uses the Angular Material datepicker.
-
minDate: Date | undefined
: The minimum date that the user can select. -
maxDate: Date | undefined
: The maximum date that the user can select. -
placeholder: string
: The placeholder for the input field. Default is an empty string. -
value: any
: The initial value of the input field. This can be any value that is compatible with the Angular Material datepicker. -
isDisabled: boolean
: A boolean to determine whether the datepicker is disabled. Default isfalse
. -
dataCy: string
: A string that can be used for Cypress testing. Default is an empty string.
-
dateChange: EventEmitter<any>
: Event emitter for thedateChange
event. This emits when the selected date is changed. -
dateInput: EventEmitter<any>
: Event emitter for thedateInput
event. This emits when the input is changed.
Import the ApsDatepickerComponent
into your Angular module.
import { ApsDatepickerComponent } from 'path-to-component';
Include it in your module declarations:
@NgModule({
declarations: [
ApsDatepickerComponent,
// other components...
],
})
export class YourModule {}
Then, in your Angular template, you can use the aps-datepicker
component like this:
<form [formGroup]="yourForm">
<aps-datepicker
formControlName="yourFormControlName"
[minDate]="yourMinDateValue"
[maxDate]="yourMaxDateValue"
[placeholder]="'Your placeholder'"
[isDisabled]="false"
[dataCy]="'yourDataCy'"
(dateChange)="yourDateChangeHandler($event)"
(dateInput)="yourDateInputHandler($event)">
</aps-datepicker>
</form>
Replace the your...
parts with your own variables and functions.
README is created by ChatGpt