i have a problem whit display the date in the variable selectedDate on ngmodel of my modal bootstrap, here the code html of modal:
<div class="modal-header">
<h4 class="modal-title">Modifica Persona</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Campi di input per modificare i dati della persona -->
<div class="form-group">
<label for="id">Id:</label>
<input type="text" class="form-control" id="id" [(ngModel)]="persona.id" name="id" disabled />
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" [(ngModel)]="persona.name" name="name" />
</div>
<div class="form-group">
<label for="surname">Surname:</label>
<input type="text" class="form-control" id="surname" [(ngModel)]="persona.surname" name="surname" />
</div>
<div class="form-group">
<label for="userName">Username:</label>
<input type="text" class="form-control" id="userName" [(ngModel)]="persona.userName" name="userName" />
</div>
<div class="form-group">
<label for="dataNascita">Data di Nascita:</label>
<div class="col-12">
<div class="input-group">
<input
readonly
class="form-control"
name="dp"
[(ngModel)]="selectedDate"
ngbDatepicker
#d="ngbDatepicker"
[maxDate]="{ year: 2023, month: 12, day: 31 }"
(ngModelChange)="onDateSelect($event)"
/>
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="salvaModifiche()">Salva</button>
<button type="button" class="btn btn-secondary" (click)="modal.dismiss('Close click')">Annulla</button>
</div>
here the component ts
import { NgbActiveModal, NgbDateStruct, } from '@ng-bootstrap/ng-bootstrap';
import { ServizioPersoneService } from '../servizio-persone.service';
import { DatePipe } from '@angular/common';
import { CustomAdapter } from '../date_picker';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modifica-persone',
templateUrl: './modifica-persone.component.html',
styleUrls: ['./modifica-persone.component.css']
})
export class ModificaPersoneComponent implements OnInit {
@Input() persona: any;
selectedDate: NgbDateStruct | null = null;
isNameModified: boolean = false;
customAdapter: CustomAdapter = new CustomAdapter();
constructor(public modal: NgbActiveModal, public ServizioPersone: ServizioPersoneService, private datePipe: DatePipe) { }
ngOnInit(): void {
console.log(this.selectedDate);
this.loadData();
console.log(this.selectedDate);
}
loadData(): void {
this.ServizioPersone.getPersonDetails(this.persona.id).subscribe((person: any) => {
this.persona = person;
const split_data = this.persona.dataNascita.split("/");
this.selectedDate = this.customAdapter.fromModel(`${split_data[0]}/${split_data[1]}/${split_data[2]}`);
console.log(this.selectedDate);
});
}
onDateSelect(event: any): void {
const newDate: NgbDateStruct = event;
this.selectedDate = newDate;
}
salvaModifiche(): void {
if (this.selectedDate) {
const formattedDate = this.datePipe.transform(
new Date(this.selectedDate.year, this.selectedDate.month - 1, this.selectedDate.day),
'dd/MM/yyyy'
);
if (formattedDate) {
this.ServizioPersone.updatePersonBirthDate(this.persona.id, formattedDate).subscribe(() => {
this.ServizioPersone.UpdatePeopleBirthDate(this.persona.id, formattedDate).subscribe(() => {
if (!this.isNameModified) {
this.persona.name += `_${this.persona.id}`;
this.isNameModified = true;
console.log(this.persona.name); // Mostra il nome con il suffisso aggiunto
}
this.modal.close(this.selectedDate);
this.modal.dismiss('Save click'); // Chiudi la modale e distruggila completamente
});
});
}
}
}
}
and here my custom date adapter for convert the date in the format string into ngbDateStruct requested from datepicker of ng boostrap and for show the date in the format dd/mm/yyyy
import {
NgbCalendar,
NgbDateAdapter,
NgbDateParserFormatter,
NgbDatepickerModule,
NgbDateStruct,
} from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';
/**
* This Service handles how the date is represented in scripts i.e. ngModel.
*/
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {
readonly DELIMITER = '/';
fromModel(value: string | null): NgbDateStruct | null {
if (typeof value === 'string') {
const date = value.split(this.DELIMITER);
return {
day: parseInt(date[0], 10),
month: parseInt(date[1], 10),
year: parseInt(date[2], 10),
};
}
return null;
}
toModel(date: NgbDateStruct | null): string | null {
return date
? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year
: null;
}
}
/**
* This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
*/
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
readonly DELIMITER = '/';
parse(value: string): NgbDateStruct | null {
if (value) {
const date = value.split(this.DELIMITER);
return {
day: parseInt(date[0], 10),
month: parseInt(date[1], 10),
year: parseInt(date[2], 10),
};
}
return null;
}
format(date: NgbDateStruct | null): string {
return date
? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year
: '';
}
}
I dont understand why it didn't show the correct day in the input of datepicker, seems for me all right... thanks for help