如何使用angular8给对象数组指定不同的日期 [英] How to give different dates for array of objects using angular8

问题描述

我在angular8应用程序中使用了bootstarp 4 datetimepicker.在这里，我正在获取所有3个字段的最新日期，但是我必须获取我给该特定字段的日期.我用过ngModel，是基于这个问题吗?

I have used bootstarp 4 datetimepicker in angular8 application. here i am getting the latest date in all 3 fields, but i have to get the date which i give to that particular field. i have used ngModel, is that issue based on that?

演示

TS:

dateRestriction(event, restriction) {
    $(".onlyDateTime").datetimepicker();
    $(".onlyDate").datetimepicker({ format: "L" });
    $(".onlyDateTime")
      .datetimepicker()
      .on("dp.change", e => {
        const date = e.date;
        console.log(e.date.format("L"));
        this.Restrictions[restriction].datetime = e.date.format("L");
      });
  }

HTML:

<div class="col-6 {{isReadOnly ? 'link-disabled' : ''}}"
            *ngFor="let restrictValue of Restrictions;let i = index">
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="{{restrictValue.id}}"
                [checked]="restrictValue.boolValue" (change)="restrictValue.boolValue = $event.target.checked"
                >
              <label class="custom-control-label" for="{{restrictValue.id}}">{{restrictValue.label}}</label>
            </div>
            <div class="form-group">
              <input type="text" class="form-control onlyDateTime" placeholder="MM/DD/YYYY HH:MM AM/PM"
                [disabled]="!restrictValue.boolValue" [(ngModel)]="restrictValue.datetime" (change)="dateRestriction($event,restrictValue)" (click)="dateRestriction($event, i)"
                [ngModelOptions]="{standalone: true}" >
            </div>
          </div>

推荐答案

由于您对datetimepicker使用了jQuery日期选择器更改事件.在日期选择器的单击事件之前被调用.

Since you using Jquery date picker change event for datetimepicker. It's getting called before click event of date picker.

尝试一下

ngAfterViewInit() {
     $(".onlyDate").datetimepicker({ format: "L" });
      let dat = null;
       $(".onlyDate")
      .datetimepicker()
      .on("dp.hide", e => {
        const date = e.date;
         let dat = e.date.format("L");
        this.Restrictions[this.selectedIndex].datetime = dat;
      });
   }

  dateRestriction( i) {
    this.selectedIndex = i;
  }

分叉示例

这篇关于如何使用angular8给对象数组指定不同的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！