Angular Integration Guide

npm install flexidatepicker

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import FlexiDatepicker from 'flexidatepicker';
import 'flexidatepicker/dist/flexidatepicker.min.css';

@Component({
  selector: 'app-date-picker',
  template: '<input #dateInput type="text" readonly placeholder="Select date" />'
})
export class DatePickerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;
  private picker: FlexiDatepicker | null = null;

  ngAfterViewInit() {
    this.picker = new FlexiDatepicker(this.dateInput.nativeElement, {
      mode: 'range',
      dateFormat: 'MMM d, yyyy',
      onSelectionChange: (data) => {
        console.log('Selected:', data);
      }
    });
  }

  ngOnDestroy() {
    this.picker = null;
  }
}

/* angular.json */
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/flexidatepicker/dist/flexidatepicker.min.css"
            ]
          }
        }
      }
    }
  }
}

// date-picker.component.ts
import { 
  Component, 
  ElementRef, 
  ViewChild, 
  AfterViewInit, 
  OnDestroy,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
import FlexiDatepicker, { FlexiDatepickerOptions } from 'flexidatepicker';

@Component({
  selector: 'app-date-picker',
  template: `
    <input 
      #dateInput 
      type="text" 
      readonly 
      [placeholder]="placeholder"
      [class]="inputClass"
    />
  `,
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;
  @Input() mode: 'single' | 'multiple' | 'range' | 'multi-range' = 'single';
  @Input() placeholder: string = 'Select date';
  @Input() inputClass: string = '';
  @Input() options: Partial<FlexiDatepickerOptions> = {};
  @Output() dateChange = new EventEmitter();

  private picker: FlexiDatepicker | null = null;

  ngAfterViewInit() {
    this.picker = new FlexiDatepicker(this.dateInput.nativeElement, {
      mode: this.mode,
      ...this.options,
      onSelectionChange: (data) => {
        this.dateChange.emit(data);
      }
    });
  }

  ngOnDestroy() {
    this.picker = null;
  }
}

// Usage in template
<app-date-picker 
  mode="range" 
  placeholder="Select date range"
  (dateChange)="handleDateChange($event)"
  [options]="{ dualCalendar: true, dateFormat: 'MMM d, yyyy' }"
>
</app-date-picker>