HTML/JS：如何让一个输入日期改变另一个输入日期？

Question

So I'm working on an Angular app and I have these two date input fields:

<div  class="col-lg-3">
      <div> {{ dataInizioLabel }} </div>
      <input required type="datetime-local" name="dataInizio" id="dateInput"
        [ngModel]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"
        (ngModelChange)="manageDateChange($event, dataInizio)" #dataInizio="ngModel">
      <small class="text-danger" *ngIf="dataInizio.errors">Campo obbligatorio</small>
    </div>
    <div class="col-lg-3">
      <div> {{ dataFineLabel }} </div>
      <input required type="datetime-local" name="dataFine" [ngModel]="serverEvent.dataFine | date:'yyyy-MM-ddTHH:mm'" id="dataFine"
        (ngModelChange)="manageDateChange($event, dataFine)" #dataFine="ngModel">
      <small class="text-danger" *ngIf="dataFine.errors">Campo obbligatorio</small>
    </div>

manageDateChange() JS (incomplete):

 manageDateChange(date, inputField) {
if (date) {
  this.serverEvent[inputField.name] = new Date(date);
}
let inizio = new Date(date.val())
console.log(inizio)

}

I can't find a way to make so the dataInizioLabel uptades the dataFineLabel field with his same date when it gets changed. For example, if dataInizioLaber gets set to 24/04/2022, I'd need dataFineLabel to self update to the same date.

Also, console says date.val() can't work and gives an error, so I don't think that's the right way to get the date value from the input field.

Answer 1

You might want to try to use a two-way binding on your ngModel like this:

[(ngModel)]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"