In my Angular Project, I have implemented a form with an input type of text that serves as a datepicker. Everything is functioning properly except for a peculiar issue that I am struggling to resolve. The problem arises when I select a date using the date picker - it displays correctly in the console. However, upon deleting the selected date from the date picker, the check if(value == "") does not get triggered, or rather, it fails to update when the value is erased. Selecting a date works fine, but deleting it does not, making the task a bit challenging.
The code looks like this:
1. HTML File
<form>
<input type="text" id="date" name="date" placeholder="Search for date">
</form>
2. Typescript File
import { Component, OnInit } from '@angular/core';
declare var $ : any;
@Component({
selector: 'app-upcoming-page',
templateUrl: './upcoming-page.component.html',
styleUrls: ['./upcoming-page.component.css']
})
export class UpcomingPageComponent implements OnInit {
constructor() { }
ngOnInit() {}
ngAfterViewInit() {
$("#date").datepicker({
onSelect: this.onDateChosen.bind(this)
})
}
}
onDateChosen(value){
console.log(value)
if (value == ""){
console.log(value)
}
}
Attempts made so far:
Utilized [(ngModel)]="dateValue" to bind and update data when certain dates are deleted, with a corresponding check in the onDateChosen() method
. Unfortunately, this did not yield the desired outcome.if(this.dateValue == "" || this.dateValue == null)Tried
if(!value)without success.
After manually deleting dates in the date picker, it does not trigger the check as expected. Selecting a date results in the correct output displayed in the console.
Any assistance provided would be greatly appreciated as I continue to strive towards achieving the desired functionality. Feel free to inquire about any uncertainties, and thank you in advance for your help.