How to used JQuery datepicker in angular?

I tried to write the below code. When I select the date from the dropdown, the date gets selected in the input but the button is not enabled.when I type something in the input my button is enabled. the validation is going on properly, there is no issue in the validation. the problem is in the Jquery code which is not getting the date in the proper input field. Please suggest us where we are going wrong.

component.html

<form #healthForm="ngForm" name="healthForm" (ngSubmit)="registerHealthPolicy(healthForm.value,healthForm.valid)">

    <select id="healthDropdown" class="select-policy select-policy-dropdown" (change)="onChange($event)" >
        <option value="memberID">Member ID</option>
        <option value="DOB">Date of Birth of Proposer</option>
    </select>
    <br>
    <div *ngIf="selectedType == 'memberID'" class="member-id" >
        <input class="input-box" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" type="number" name="healthMemberId" placeholder="Member ID" [(ngModel)]="healthMemberId" required/>
    </div>
    <div class="date-box">
        <div *ngIf="selectedType == 'DOB'" class="date-container">
             <input class="input-box" autocomplete="false" type="text" name="healthDate" id="datepicker" placeholder="" ngModel required/>
            <span>
                    <img src="assets/images/calendar.png">
            </span> 
        </div>
    </div>
    <br>
    <div class="terms-container">
        <input type="checkbox" id="checkbox-1-2" name="health_terms" #healthTerms="ngModel" ngModel class="regular-checkbox" required/>
        <label for="checkbox-1-2"></label>
        <span>I have read the <a href="#" disabled data-toggle="modal" data-target="#terms_condition_modal_kgi" class="condition">Terms and Conditions</a> and agree to abide by the same.</span>
        <br/>
        <small class="validation-error" [hidden]="healthTerms.valid || (healthTerms.pristine && !healthForm.submitted)">Please accept terms and conditions</small>                                            
    </div>
    <button class="sbmt-btn" type="submit" [disabled]="!healthForm.valid || !healthTerms">
        Submit
    </button>
</form>

component.ts

selectedType = 'memberID';

ngAfterViewChecked() {
  $("#datepicker").attr("autocomplete", "off");
  $("#datepicker").datepicker({
   changeMonth: true,
   changeYear: true,
   dateFormat: "dd-mm-yy",
   maxDate: "-1m",
   yearRange: "1940:c"
});
}

onChange(event) {
    this.selectedType = event.target.value;
    
  }

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW