Flatpickr

There are a few options on how to include Flatpickr into your Angular project.

Install from NPM

Install the Flatpickr library from the command prompt in the root directory of the project:

yarn add flatpickr --save

Import the Flatpickr package in your component file:

import flatpickr from "flatpickr";

To use Flatpickr in your component, you can add the following HTML:

HTML

<input id="datepicker" class="form-input" type="text" placeholder="Select Date" />

In your component's TypeScript file, initialize Flatpickr:

import { Component, AfterViewInit } from '@angular/core';
import flatpickr from "flatpickr";

@Component({
    selector: 'app-datepicker',
    templateUrl: './datepicker.component.html'
})
export class DatepickerComponent implements AfterViewInit {
    ngAfterViewInit() {
        flatpickr("#datepicker", {
            dateFormat: "Y-m-d",
            // Additional options can be set here
        });
    }
}

You can customize Flatpickr with additional options such as minDate, maxDate, and more. Refer to the official documentation for further customization options.