Topic: Formatting manually typed date on datepicker

noveltytech priority asked 10 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 10 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>

vincenttan623 priority commented 4 months ago

Looks good, some bug or missed config on the inputMask.

Reproduce step:

  1. When user input directly the date to the text. Indeed the form.date capture the value.

  2. Next, user click on the date picker, and select a different date. The form.date still capture the value.

  3. 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 4 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 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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