How to restrict the input field to accept only date related inputs in angular8

Question

Hi i am using angular8 + jquery for datetimepicker. Here i need to restrict the date input field for date format and even without allowing alphabets except am/pm. so i want the input field to allow either MM/dd/yyyy or m/d/yyyy or mmddyyyy or mmddyyyy hh:mm am/pm.

DEMO: DEMO

I have used this example to make my calendar work:

Referred Link Can you please help me to go through it

TS:

ngAfterViewInit() {
    $(".OnlyDate")
      .datetimepicker({ format: "L", useCurrent: false })
      .on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
        } else {
          this.date = null;
        }
      });
    if (!this.eoList) {
      $(".effectiveDate")
        .datetimepicker({ format: "L", useCurrent: false })
        .on("dp.change", e => {
          if (e.date) {
            const date = e.date.format("L");
            this.date = date;
          } else {
            this.date = null;
          }
        });
      $(".expirationDate").datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: "L",
      });
      $(".effectiveDate").on("dp.change", function (e) {
        $('.expirationDate').data("DateTimePicker").minDate(e.date);
      });
      $(".effectiveDate").on("dp.change", e => {
        const date = e.date.format("L");
        this.date = date;
        $(".expirationDate")
          .data("DateTimePicker")
          .minDate(e.date);
      });
      $(".expirationDate").on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
        } else {
          this.date = null;
        }
        $(".effectiveDate").data("DateTimePicker");
      });
    } else {
      $(".effectiveDate")
        .datetimepicker({ format: "L", useCurrent: false })
        .on("dp.change", e => {
          if (e.date) {
            const date = e.date.format("L");
            this.date = date;
          } else {
            this.date = null;
          }
        });
      $(".expirationDate").datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: "L",
        minDate: new Date(this.eoInfoForm.value.effectiveDate) 
      });
      $(".effectiveDate").on("dp.change", function (e) {
        $('.expirationDate').data("DateTimePicker").minDate(e.date);
      });
      $(".effectiveDate").on("dp.change", e => {
        const date = e.date.format("L");
        this.date = date; 
         this.eoInfoForm.get('effectiveDate').setValue(this.date, { emitEvent: false });
      if (this.eoInfoForm.value.effectiveDate) {
        this.eoInfoForm.get('expirationDate').enable();
        var aYearFromNow = new Date(this.eoInfoForm.value.effectiveDate);
        aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 1);
        this.eoInfoForm.get('expirationDate').patchValue(new DatePipe('en').transform(aYearFromNow, 'MM/dd/yyyy'))
      } else {
        this.eoInfoForm.get('expirationDate').disable();
      }

        $(".expirationDate")
          .data("DateTimePicker")
          .minDate(e.date);
      });
      $(".expirationDate").on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
           this.eoInfoForm.get('expirationDate').setValue(this.date, { emitEvent: false });
        } else {
          this.date = null;
        }
        $(".effectiveDate").data("DateTimePicker");
      });

    }

  }


}