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.
You might want to try to use a two-way binding on your ngModel like this:
[(ngModel)]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"