Topic: Formatting manually typed date on datepicker
*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>
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>
vincenttan623 priority commented 3 months ago
Looks good, some bug or missed config on the inputMask.
Reproduce step:
When user input directly the date to the text. Indeed the form.date capture the value.
Next, user click on the date picker, and select a different date. The form.date still capture the value.
if user select the input to make changes, just right after the input textbox is focus, the value changed to first manual input, and the form.date value still remain on the date picker selected value.
vincenttan623 priority commented 3 months ago
Just to add on, on the input with datepicker without input mask, it works. The control state did capture regardless input from date picker or input from textbox.
So I guess is something I missed on the input mask to work along with date picker. Any idea?
Rafał Seifert staff commented 3 months ago
It looks indeed like some the input has problem working both with input mask and datepicker at the same time. I don't have a fast workaround for now. We will have to look into this case and think of a solution.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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