为日期格式添加自定义掩码答案

【问题标题】：Adding custom masking for date formatting为日期格式添加自定义掩码
【发布时间】：2022-11-20 05:29:32
【问题描述】：

由于 ng-mask 不与 ngbDatepicker 一起使用，我使用正则表达式制作指令日期格式的掩码以获取用户输入。但问题是在输入日期后，当我按退格键时“/”不会删除。

解决此问题的最佳方法是什么？

我的 HTML 日期选择器代码：

<div class="input-group">
          <input formControlName="DOB" class="form-control" id="DateOfBirthFormat" placeholder="mm/dd/yyyy" name="dp" [(ngModel)]="dateOffBirth" ngbDatepicker
            #d="ngbDatepicker" (click)="d.open();" (dateSelect)="chooseDate($event)" (input)="inputDateFRomCalender($event.target.value)" appMaskInput onlyNumbers>
          <span class="input-group-text" (click)="d.open()">
            <i class="icon-calendar"></i>
          </span>
 </div>

我的指令代码：

import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from 
   '@angular/core';
    @Directive({
    selector: '[appMaskInput]'
   })
  export class MaskInputDirective implements OnInit {

  private regexOne: RegExp = new RegExp(/^\d{2}$/);
  private regexTwo: RegExp = new RegExp(/^\d{2}\/\d{2}$/);

  private regexThree: RegExp = new RegExp(/^\d\/$/);

  private specialKeys: Array<string> = ['Backspace'];

  @Input() appMaskValue: string;
  constructor(
    private elRef: ElementRef,
    private renderer: Renderer2
  ) { }
  ngOnInit(): void {
  }
  @HostListener('input', ['$event'])

  onInput(event) {

    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }


    let v = event.target.value;

    let test = v.keyCode;

    console.log(test);



    if (v.match(this.regexOne) !== null) {
      event.target.value = v + '/';
    } else if (v.match(this.regexTwo) !== null) {
      event.target.value = v + '/';
    }
   

  }

}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： angular datepicker ng-bootstrap masking

【解决方案1】：

我成功地使用了下面给出的指令。它正在监听用户 keydown 事件添加斜线。

https://medium.com/@victor.loh95/create-date-masking-custom-directive-for-ngbdatepicker-ff4cc73097c1

【讨论】：