17.5.1 • Published 24 days ago
ngx-mat-birthday-input v17.5.1
NgxMatBirthdayInput
An Angular Material library for entering a birthday.
- Split a date into 3 input fields, day, month and year, then reassemble and save them into a given formControl.
- Automatically add
0
in front of the day/month number. - Remove
.
ande
from the possible input. - Does automatically focus the next field when needed.
- Based on the Vitaly Friedman article, Designing Birthday Picker UX: Simpler Is Better
Supports:
- Angular >=15
- Angular Material >=15
Demo
https://stackblitz.com/~/github.com/rbalet/ngx-mat-birthday-input
Installation
npm i ngx-mat-birthday-input
Usage
Import
Add NgxMatBirthdayInputComponent
to your component file:
imports: [NgxMatBirthdayInputComponent];
Example
- Add
floatLabel
to yourmat-form-field
- Use a preset
formControlName
- This
formControlName
will be automatically updated, therefore giving you the possibility to add your ownmat-error
see the comment
<form #f="ngForm" [formGroup]="birthdayForm">
<mat-form-field
floatLabel="always"
>
<!-- <mat-label>Birthday</mat-label> -->
<ngx-mat-birthday-input
formControlName="birthday"
id="birthday"
>
</ngx-mat-birthday-input>
<!-- <mat-icon matSuffix>event</mat-icon>
<mat-error *ngIf="birthdayForm?.get('birthday').invalid">
{{ Invalide error message }}
</mat-error> -->
</mat-form-field>
</form>
Options
Options | Type | Default | Description |
---|---|---|---|
formControlName | FormControl | undefined | Control to be updated |
autocomplete | "on" or "off" | "on" | Use the default browser autofill |
labels | string[] | ["DD", "MM", "YYYY"] | Label used by the mat-input |
placeholders | string[] | ["", "", ""] | with an s |
required | boolean | undefined | |
disabled | boolean | undefined |
Css variable
Name | Default | Explanation |
---|---|---|
--ngx-mat-birthday-input-gap | 16px | Change the gap between the inputs |
Authors and acknowledgment
- maintainer Raphaël Balet
17.5.1
24 days ago
17.5.0
27 days ago
17.4.0
28 days ago
17.3.1
29 days ago
17.3.0
2 months ago
17.2.1
2 months ago
17.2.2
2 months ago
17.2.0
2 months ago
17.1.1
2 months ago
17.1.0
3 months ago
17.0.6
6 months ago
17.0.5
6 months ago
17.0.4
6 months ago
17.0.3
6 months ago
17.0.2
6 months ago
17.0.1
6 months ago
17.0.0
6 months ago