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>


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

  • 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