Topic: Formatting manually typed date on datepicker
noveltytech
priority
asked 2 months ago
*Expected behavior*The current date picker does not offer any kind of formatting on manually entered dates. I want to add a "/" automatically after the user enters "12" as month and after "24" as date as per the format "MM/DD/YYYY".**Actual behavior*No formatting and validation options, allows all random texts and numbers.
<input [mdbDatepicker]="date" type="text" class="form-control" id="date"
(click)="date.open()" formControlName="date" name="date" autocomplete="off" />
<mdb-datepicker-toggle [mdbDatepicker]="date"></mdb-datepicker-toggle>
<mdb-datepicker #date [inline]="true" [format]="'mm/dd/yyyy'"></mdb-datepicker>
Rafał Seifert
staff
answered 2 months ago
I think the solution for you is to use our plugin Input Mask. If you have access to plugins here is the implementation that may be appropriate for you:
<mdb-form-control> <input [mdbDatepicker]="date" type="text" class="form-control" id="date" (click)="date.open()" formControlName="date" name="date" autocomplete="off" mdbInputMask="mo/da/year" [customValidator]="'[0-1],[0-9],[0-3],[0-9],[1-2],[0-9],[0-9],[0-9]'" [customMask]="'m,o,d,a,y,e,a,r'" /> <mdb-datepicker-toggle [mdbDatepicker]="date"></mdb-datepicker-toggle> <mdb-datepicker #date [inline]="true" [format]="'mm/dd/yyyy'"></mdb-datepicker> </mdb-form-control>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: Laptop
- Browser: Chrome
- OS: windows
- Provided sample code: No
- Provided link: No