How to use jQuery Datepicker in Angular

This blog provides steps regarding how to use jQuery UI component Datepicker with Angular.

Here are the steps and code to use Datepicker of jQuery UI component to take date from user in an Angular form.

app.module.ts

Module must include FormsModule as we use Template Form of Angular.

Component DaysComponent is where we take start date and end date from user using Datepicker.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DaysComponent } from './jquery/days.component';

@NgModule({
  declarations: [
    DaysComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [ ],
  bootstrap: [DaysComponent]
})
export class AppModule { }

days.component.ts

Component where we need to use Datepicker must implement ngOnInit() to associate html elements with Datepicker using datepicker() function.

Use ViewChild decorator to get access to HTML textboxes used to take input from user.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;  // Declaring $ as a variable so that we can use it to access jQuery

@Component({
    selector: 'count-days',
    templateUrl: './days.component.html'
})
export class DaysComponent implements OnInit {
    message : string;
    days : number;
    
    @ViewChild('sd') sdate : ElementRef;
    @ViewChild('ed') edate : ElementRef;
    
    constructor() { }

    ngOnInit(): void {
        $(
            function() {
                $("#startDate").datepicker( {dateFormat : "yy-mm-dd"});
                $("#endDate").datepicker( {dateFormat : "yy-mm-dd"});
            }
        );         
     }

    getNoDays() {
         this.message = "";
         this.days = 0;
         
         let startDate = this.sdate.nativeElement.value;
         let endDate = this.edate.nativeElement.value;
          
         if (startDate && endDate) {
            var start  = new Date(startDate)
            var end = new Date(endDate)
            let ms = (end.getTime() - start.getTime()); // get no. of milliseconds between dates
            // find out no. of days
            this.days = ms / (1000 * 60 * 60 * 24); // divide total milliseconds by no. of milliseconds per day
        }
        else{
            this.message = "Please select dates first!"
        }
    }
}

days.component.html

Template is used to create a simple HTML form with two fields to take input from user and a button to initiate calculation.

<form>
  Start Date : <input type="text" #sd name="startDate" id="startDate"/>
  End Date : <input type="text" #ed name="endDate" id="endDate" />
  <p></p>
  <button (click)="getNoDays()">No. Of Days</button>
</form>
<p></p>
<h3 *ngIf="message">{{message}}</h3>
<h3 *ngIf="days > 0">No. of days = {{days}} </h3>

index.html

Include jQuery and jQuery UI in index.html so that it is available to entire application.

jQuery is obtained through Google CDN.

Download jQuery UI and extract files into asset folder of Angular application.

Make a reference to jQuery UI script using script tag and jQuery CSS using link tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular and jQuery</title>
  <base href="/">
  <!-- include jquery -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="assets/jquery-ui.js"></script>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  href="assets/jquery-ui.css">
  
</head>
<body>
  <count-days></count-days>
</body>
</html>

When you run DaysComponent, it will display the following page to take dates from user using jQuery Datepicker UI component.