Как ограничить поле ввода, чтобы принимать только связанные с датой входные данные в angular8 - PullRequest
Новая
       73

Как ограничить поле ввода, чтобы принимать только связанные с датой входные данные в angular8

0 голосов
/ 16 марта 2020

Привет, я использую angular8 + jquery для выбора даты и времени. Здесь мне нужно ограничить поле ввода даты для формата даты и даже без разрешения алфавитов, кроме утра / вечера. поэтому я хочу, чтобы в поле ввода было разрешено либо ММ / дд / гггг, либо м / д / гггг, либо ммддггг, либо ммддггг чч: мм / мс.

ДЕМО: ДЕМО

Я использовал этот пример, чтобы заставить мой календарь работать:

Ссылочная ссылка Можете ли вы помочь мне go через него

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

    }

  }


}
...