javascript - 如何以 Angular 制作日期输入掩码？

Question

我正在尝试以 Angular 输入出生面具的日期，日期格式为 dd/mm/yyyy ，但它没有根据我们的要求输入值设置和返回输入。

我的代码如下。

<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;
  }

Answer 1

<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;
  }