How to make the date input mask in angular?

Question

I am trying to make the input date of birth mask in angular and format of date is dd/mm/yyyy ,but it not set and return the input according to our requirement input value.

my code given below.

<input type="text"  placeholder="{{timePlaceholder}}" (focus)="showlable()" (focusout)="hidelable()" (keypress)="this.value =fixDatePattern($event);">
    currentDate:any = "";
currentLength:any ="";
lastNumberEntered:any ="";
transformedDate:any="";
dateCountTracker:any="";

    fixDatePattern(event) {
    this.currentDate = event.target.value;
    this.currentLength = this.currentDate.length;
    this.lastNumberEntered = this.currentDate[this.currentLength - 1];

    if (this.currentLength > 10) {
      return this.currentDate.substring(0, 10);
    }

    if (this.currentLength == 1 && this.currentDate > 1) {
     this.transformedDate = "0" + this.currentDate + '/';
      this.dateCountTracker = 2;
      this.currentLength = this.transformedDate.length;
      return this.transformedDate;
    } else if (this.currentLength == 4 && this.currentDate[3] > 3) {
      this.transformedDate = this.currentDate.substring(0, 3) + "0" + this.currentDate[3] + '/';
      this.dateCountTracker = 5;
      this.currentLength = this.transformedDate.length;
      return this.transformedDate;
    } else if (this.currentLength == 2 && (this.dateCountTracker != 2 && this.dateCountTracker != 3)) {
      this.dateCountTracker = this.currentLength;
      return this.currentDate + '/';
    } else if (this.currentLength == 5 && (this.dateCountTracker != 5 && this.dateCountTracker != 6)) {
      this.dateCountTracker = this.currentLength;
      return this.currentDate + '/';
    }
    this.dateCountTracker = this.currentLength;
    return this.currentDate;
  }

Ayush Sahu · Accepted Answer · 2018-09-05 08:25:03Z

<input placeholder="mm/dd/yyyy" (input)="KeyUpCalled($event.target.value)" maxlength="10" [(ngModel)]="inputValue">


inputValue;
  KeyUpCalled(value){
    var dateCountTracker;
    var currentDate = value;
    var currentLength = currentDate.length;
    var lastNumberEntered = currentDate[currentLength - 1];
    if (currentLength > 10) {
      var res = currentDate.substring(0, 10) 
      this.inputValue = res;
      return this.inputValue
    }

    if (currentLength == 1 && currentDate > 1) {
      var transformedDate = "0" + currentDate + '/';
      dateCountTracker = 2;
      currentLength = transformedDate.length;
      this.inputValue = transformedDate;
      return this.inputValue;
    } else if (currentLength == 4 && currentDate[3] > 3) {
      var transformedDate = currentDate.substring(0, 3) + "0" + currentDate[3] + '/';
      dateCountTracker = 5;
      currentLength = transformedDate.length;
      this.inputValue = transformedDate;
      return this.inputValue;
    } else if (currentLength == 2 && (dateCountTracker != 2 && dateCountTracker != 3)) {
      dateCountTracker = currentLength;
      this.inputValue = currentDate + '/'
      return this.inputValue;
    } else if (currentLength == 5 && (dateCountTracker != 5 && dateCountTracker != 6)) {
      dateCountTracker = currentLength;
      // return currentDate + '/';
      this.inputValue = currentDate + '/'
      return this.inputValue;
    }
    dateCountTracker = currentLength;
    this.inputValue = currentDate;
  }

Aza M. · Accepted Answer · 2022-05-05 08:44:44Z

0

Using primeng :

in app module :

    import {InputMaskModule} from 'primeng/inputmask';
@NgModule({
  imports: [
...
    InputMaskModule,
    FormsModule
  ],

for the HTML :

<div class="p-col-12 p-md-6 p-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
    </div>

source : https://www.primefaces.org/primeng/inputmask

answered May 5, 2022 at 8:44

Aza M.

212 bronze badges

Collectives™ on Stack Overflow

How to make the date input mask in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related