Create DatePicker By TailWindCss Angular

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-DatePicker',  templateUrl: './date-picker.html'})export class DatePickerComponent implements OnInit {  MONTH_NAMES = [    'January',    'February',    'March',    'April',    'May',    'June',    'July',    'August',    'September',    'October',    'November',    'December'  ];  DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];  days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];  showDatepicker = false;  datepickerValue!: string;  month!: number; // !: mean promis it will not be null, and it will definitely be assigned  year!: number;  no_of_days = [] as number[];  blankdays = [] as number[];  constructor() {}  ngOnInit(): void {    this.initDate();    this.getNoOfDays();  }  initDate() {    let today = new Date();    this.month = today.getMonth();    this.year = today.getFullYear();    this.datepickerValue = new Date(this.year, this.month, today.getDate()).toDateString();  }  isToday(date: any) {    const today = new Date();    const d = new Date(this.year, this.month, date);    return today.toDateString() === d.toDateString() ? true : false;  }  getDateValue(date: any) {    let selectedDate = new Date(this.year, this.month, date);    this.datepickerValue = selectedDate.toDateString();    this.showDatepicker = false;  }  getNoOfDays() {    const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();    // find where to start calendar day of week    let dayOfWeek = new Date(this.year, this.month).getDay();    let blankdaysArray = [];    for (var i = 1; i <= dayOfWeek; i++) {      blankdaysArray.push(i);    }    let daysArray = [];    for (var i = 1; i <= daysInMonth; i++) {      daysArray.push(i);    }    this.blankdays = blankdaysArray;    this.no_of_days = daysArray;  }  trackByIdentity = (index: number, item: any) => item;}

<div class="flex items-center justify-center bg-gray-200 h-full">  <div class="antialiased sans-serif">    <div>      <div class="container mx-auto px-4 py-2 md:py-10">        <div class="mb-5 w-64">          <label for="datepicker" class="font-bold mb-1 text-gray-700 block">Select Date</label>          <div class="relative">            <input type="hidden" name="date" x-ref="date" />            <input              type="text"              readonly              [(ngModel)]="datepickerValue"              (click)="showDatepicker = !showDatepicker"              (keydown.escape)="showDatepicker = false"              class="                w-full                pl-4                pr-10                py-3                leading-none                rounded-lg                shadow-sm                focus:outline-none focus:shadow-outline                text-gray-600                font-medium              "              placeholder="Select date"            />            <div class="absolute top-0 right-0 px-3 py-2">              <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">                <path                  stroke-linecap="round"                  stroke-linejoin="round"                  stroke-width="2"                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"                />              </svg>            </div>            <!-- <div {{no_of_days.length"></div>                            <div {{32 - new Date(year, month, 32).getDate()"></div>                            <div {{new Date(year, month).getDay()"></div> -->            <div              class="bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"              style="width: 17rem"              [hidden]="!showDatepicker"              (keydown.away)="showDatepicker = false"            >              <div class="flex justify-between items-center mb-2">                <div>                  <span class="text-lg font-bold text-gray-800">{{ MONTH_NAMES[month] }}</span>                  <span class="ml-1 text-lg text-gray-600 font-normal">{{ year }}</span>                </div>                <div>                  <button                    type="button"                    class="                      transition                      ease-in-out                      duration-100                      inline-flex                      cursor-pointer                      hover:bg-gray-200                      p-1                      rounded-full                    "                    [ngClass]="{ 'cursor-not-allowed opacity-25': month === 0 }"                    [disabled]="month === 0 ? true : false"                    (click)="month = month - 1"                    (click)="getNoOfDays()"                  >                    <svg                      class="h-6 w-6 text-gray-500 inline-flex"                      fill="none"                      viewBox="0 0 24 24"                      stroke="currentColor"                    >                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />                    </svg>                  </button>                  <button                    type="button"                    class="                      transition                      ease-in-out                      duration-100                      inline-flex                      cursor-pointer                      hover:bg-gray-200                      p-1                      rounded-full                    "                    [ngClass]="{ 'cursor-not-allowed opacity-25': month === 11 }"                    [disabled]="month === 11 ? true : false"                    (click)="month = month + 1"                    (click)="getNoOfDays()"                  >                    <svg                      class="h-6 w-6 text-gray-500 inline-flex"                      fill="none"                      viewBox="0 0 24 24"                      stroke="currentColor"                    >                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />                    </svg>                  </button>                </div>              </div>              <div class="flex flex-wrap mb-3 -mx-1">                <ng-container *ngFor="let day of DAYS; let index = index">                  <div style="width: 14.26%" class="px-1">                    <div class="text-gray-800 font-medium text-center text-xs">{{ day }}</div>                  </div>                </ng-container>              </div>              <div class="flex flex-wrap -mx-1">                <ng-container *ngFor="let blankday of blankdays">                  <div style="width: 14.28%" class="text-center border-none p-1 border-transparent text-sm"></div>                </ng-container>                <ng-container *ngFor="let date of no_of_days; let dateIndex = index; trackBy: trackByIdentity">                  <div style="width: 14.28%" class="px-1 mb-1">                    <div                      (click)="getDateValue(date)"                      class="                        cursor-pointer                        text-center text-sm                        rounded-full                        leading-loose                        transition                        ease-in-out                        duration-100                      "                      [ngClass]="{                        'bg-blue-500 text-white': isToday(date) === true,                        'text-gray-700 hover:bg-blue-200': isToday(date) === false                      }"                    >                      {{ date }}                    </div>                  </div>                </ng-container>              </div>            </div>          </div>        </div>      </div>    </div>  </div></div>

import { FormsModule } from '@angular/forms';@NgModule({  imports: [    ...,     FormsModule  ]})