CODEWITHSUNDEEP
angulartypescript
Ricky
Ricky

Reputation: 258

Avoid Angular 2 double two-way binding

I have two bootstrap datepickers that represent an interval of time( one being the start date and the other the end date). I have both of these dates binded with ngModel:

 <td>
                    {{'STARTDATE'|translate}}
                    <datepicker [(ngModel)]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="setEndDate()"></datepicker>
                </td>
                <td>
                    {{'ENDDATE'|translate}}
                    <datepicker [(ngModel)]="EndDate" name="EndDate" [showWeeks]="false" (ngModelChange)="setStartDate()"></datepicker>

                </td>

When I change the Start Date the End Date must be changed and vice versa, depending on a selected time interval(e.g: a day, a week, a month, etc). Dates are updated in the setEndDate and SetStartDate methods.

The problem is when one variable is changed the other one is changed twice. Any tips?

UPDATE: Here are the Date set functions:

setEndDate() {
    var datediffcardinal: number = this.checkDateDiff()
    this.EndDate = new Date()
    this.EndDate.setDate(this.StartDate.getDate() + datediffcardinal)
    console.log("End")
    console.log(this.EndDate)
}

setStartDate() {
    var datediffcardinal: number = this.checkDateDiff()
    this.StartDate = new Date();
    this.StartDate.setDate(this.EndDate.getDate() - datediffcardinal)
    console.log("Start")
    console.log(this.StartDate)
}

checkDateDiff() {
    var end = Date.parse(this.wallboard.endDate.toString())
    var start = Date.parse(this.wallboard.startDate.toString())
    var diff = end - start
    var days: number = Math.floor(diff / (1000 * 60 * 60 * 24)) + 1
    return days;
}

Upvotes: 1

Views: 737

Answers (1)

n00dl3
n00dl3

Reputation: 21574

you need to choose between [(myProperty)] and [myproperty]+(mypropertyChange) combo.

this is wrong :

<datepicker [(ngModel)]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="setEndDate()"></datepicker>

this is good :

<datepicker [ngModel]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="updateStartDate($event)"></datepicker>

updateStartDate(date){
    this.StartDate = date;
    this.setEndDate();
}

Upvotes: 3

Related Questions