Как отобразить введенное значение в виде календаря, используя Angular 8 - PullRequest
Новая
       10

Как отобразить введенное значение в виде календаря, используя Angular 8

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

Я использовал jQuery с Angular 8 для календаря datetimepicker, поскольку это было требованием и не имело выбора. Если я выберу значение из календаря, то оно будет работать нормально, но если я выберу значение, набрав, например, «09092009», и сделаю вкладку, значение не будет отформатировано в формате календаря, и оно будет возвращено как «09092009» из массив и привязывается к массиву объектов datetime.

Но я хочу, чтобы он был отформатирован в формате даты, который отображается в поле ввода календаря, например «09.09.2009 12:00 AM». Как этого достичь?

Вот мое демо:

DEMO

Пожалуйста, помогите

TS: 

dateRestriction(i) {
    this.selectedIndex = i;
    $(".onlyDate").datetimepicker({ format: "L" });
      let dat = null;
       $(".onlyDateTime")
      .datetimepicker()
      .on("dp.hide", e => {
        const date = e.date;
         let dat = e.date.format("L");
         this.w9InfoDetails.at(this.selectedIndex).get('datetime').setValue(date.format("MM/DD/YYYY hh:mm:ss A"), { emitEvent: false });
      })
  }

HTML: 

<form [formGroup]= "form" (submit)="onSubmit()">
  <div formArrayName="array">
    <div class="col" *ngFor="let value of values;let i = index">
      <div [formGroupName]="i">
        <div class="custom-control custom-switch mb-3">        
          <label class="custom-control-label">
            <input type="checkbox" formControlName="boolValue" (click)="selectedbool(i)" /> 
            {{value.label}}
          </label>
        </div>
        {{datetime}}
        <input type="text" formControlName="datetime" (click)="dateRestriction(i)" class="onlyDateTime"/>
      </div>
    </div>
  </div>      
   <button class="btn btn-primary btn-lg min-w100 float-right mt-3">
     Save
  </button>
</form>
...