aps-datepicker
v1.2.1
Published
This is a reusable Angular component for a datepicker input. This component uses the Angular Material datepicker.
Downloads
16
Readme
APS Angular Datepicker Component
This is a reusable Angular component for a datepicker input. This component uses the Angular Material datepicker.
Inputs
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.
Outputs
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.
How to Use
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