How to give different dates for array of objects using angular8

Question

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?

DEMO

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>

What's the issue? Why have you disabled the inputs in the demo? Why are you using jQuery with Angular? — Kurt Hamilton
– Kurt Hamilton, Commented Feb 18, 2020 at 8:55
based on checkbox checked, that particular fields will be enabled, then we can add date there, if disabled, date cant be entered, and as per requirement i got this jquery only which has both datetime picker — Bhrungarajni
– Bhrungarajni, Commented Feb 18, 2020 at 8:57
Ah, I didn't see the disabled check boxes there. Still, try to use an alternative that doesn't use jQuery if you can. There are many native Angular datepickers to choose from. — Kurt Hamilton
– Kurt Hamilton, Commented Feb 18, 2020 at 9:09
but here except bootstrap4, i shouldnt use any other plugins also, i hope issue is with the ngModel i have i used but not getting how to sollve it — Bhrungarajni
– Bhrungarajni, Commented Feb 18, 2020 at 9:10
move this.Restrictions[i].datetime = dat; line of code inside dp.onChange event call back — Chellappan வ
– Chellappan வ, Commented Feb 20, 2020 at 16:00

Chellappan வ · Accepted Answer · 2020-02-20 17:02:12Z

1

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

Try this

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

Forked Example

answered Feb 20, 2020 at 17:02

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bhrungarajni Over a year ago

thanks fr response but date calendar is not opening

Chellappan வ Over a year ago

Jquery is not loading properly in stackblitz change something in your code and try

Bhrungarajni Over a year ago

i did small change, in the second jquery i added onlyDateTime and it worked

Bhrungarajni Over a year ago

i tried like this and it worked, thanks a lot stackblitz.com/edit/github-ck3u8u-4bgun3?file=src/app/…

Bhrungarajni Over a year ago

please have a look at this, when you get time, please and thank you soo much bro, stackoverflow.com/questions/60321749/…

Collectives™ on Stack Overflow

How to give different dates for array of objects using angular8

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related