@up_si_vale/sivale-componentes-angular 1.0.0

package/src/lib/atoms/date-picker/date-picker.component.ts

@@ -0,0 +1,942 @@
+import {
+  Component,
+  Input,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  HostListener,
+  Renderer2,
+  OnInit
+} from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Inject } from '@angular/core';
+
+export interface DateRange {
+  startDate: Date | null;
+  endDate: Date | null;
+}
+
+export type DatePickerValue = Date | null | DateRange;
+
+interface CalendarDay {
+  date: Date;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isInRange: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+  isDisabled: boolean;
+}
+
+type FilterOption = 'hoy' | 'ayer' | 'esta-semana' | 'semana-pasada' | 'este-mes' | 'mes-pasado' | 'este-ano' | 'ano-pasado' | 'mostrar-todo';
+
+@Component({
+  selector: 'app-date-picker',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePickerComponent),
+      multi: true
+    }
+  ]
+})
+export class DatePickerComponent implements ControlValueAccessor, OnDestroy, OnInit {
+  @Input() label = '';
+  @Input() id = '';
+  @Input() placeholder = 'Seleccionar fecha';
+  @Input() hasError = false;
+  @Input() errorMessage = '';
+  @Input() disabled = false;
+  @Input() minDate?: Date;
+  @Input() maxDate?: Date;
+  @Input() rangeMode = false; // false = single date, true = date range
+  @Input() iconPosition: 'left' | 'right' = 'left';
+
+  @ViewChild('trigger', { read: ElementRef }) trigger!: ElementRef;
+  @ViewChild('dropdown', { read: ElementRef }) dropdown?: ElementRef;
+
+  // Single date value
+  singleValue: Date | null = null;
+  // Range value
+  rangeValue: DateRange = { startDate: null, endDate: null };
+
+  isOpen = false;
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  leftMonthDate: Date = new Date();
+  rightMonthDate: Date = new Date();
+  tempStartDate: Date | null = null;
+  tempEndDate: Date | null = null;
+  tempSingleDate: Date | null = null;
+  hoverDate: Date | null = null;
+
+  // Store original calendar positions for cancel
+  originalLeftMonthDate: Date = new Date();
+  originalRightMonthDate: Date = new Date();
+
+  // Cached calendar days
+  leftCalendarDays: CalendarDay[] = [];
+  rightCalendarDays: CalendarDay[] = [];
+
+  filterOptions: { value: FilterOption; label: string }[] = [
+    { value: 'hoy', label: 'Hoy' },
+    { value: 'ayer', label: 'Ayer' },
+    { value: 'esta-semana', label: 'Esta semana' },
+    { value: 'semana-pasada', label: 'Semana pasada' },
+    { value: 'este-mes', label: 'Este mes' },
+    { value: 'mes-pasado', label: 'Mes pasado' },
+    { value: 'este-ano', label: 'Este año' },
+    { value: 'ano-pasado', label: 'Año pasado' },
+    { value: 'mostrar-todo', label: 'Mostrar todo' }
+  ];
+
+  selectedFilter: FilterOption | '' = '';
+
+  weekDays = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+  months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
+
+  // Month/Year picker state
+  showLeftMonthPicker = false;
+  showRightMonthPicker = false;
+  years: number[] = [];
+  leftYearPickerPage = 0;
+  rightYearPickerPage = 0;
+  yearsPerPage = 12;
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+  dropdownPosition: { top: string; left: string } = { top: '0px', left: '0px' };
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
+
+  ngOnInit(): void {
+    this.initializeDates();
+  }
+
+  ngOnDestroy(): void {
+    this.removeRepositionListeners();
+  }
+
+  private initializeDates(): void {
+    const today = new Date();
+    this.leftMonthDate = new Date(today.getFullYear(), today.getMonth(), 1);
+    this.rightMonthDate = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+    this.updateCalendarDays();
+  }
+
+  private updateCalendarDays(): void {
+    this.leftCalendarDays = this.generateCalendarDays(this.leftMonthDate);
+    if (this.rangeMode) {
+      this.rightCalendarDays = this.generateCalendarDays(this.rightMonthDate);
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.isOpen) return;
+
+    const triggerElement = this.trigger?.nativeElement;
+    const dropdownElement = this.document.querySelector('.date-picker-dropdown');
+    const monthYearPickers = this.document.querySelectorAll('.month-year-picker');
+    const monthYearButtons = this.document.querySelectorAll('.month-year');
+
+    let isOnMonthYearButton = false;
+    monthYearButtons.forEach(button => {
+      if (button.contains(event.target as Node)) {
+        isOnMonthYearButton = true;
+      }
+    });
+
+    let isInsideMonthYearPicker = false;
+    monthYearPickers.forEach(picker => {
+      if (picker.contains(event.target as Node)) {
+        isInsideMonthYearPicker = true;
+      }
+    });
+
+    if (isOnMonthYearButton || isInsideMonthYearPicker) {
+      return;
+    }
+
+    if (dropdownElement && dropdownElement.contains(event.target as Node)) {
+      this.showLeftMonthPicker = false;
+      this.showRightMonthPicker = false;
+      return;
+    }
+
+    if (triggerElement && !triggerElement.contains(event.target as Node)) {
+      if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+        this.closeDropdown();
+      }
+    }
+  }
+
+  toggleDropdown(event: Event): void {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  private openDropdown(): void {
+    if (!this.trigger) return;
+
+    if (this.rangeMode) {
+      this.tempStartDate = this.rangeValue.startDate;
+      this.tempEndDate = this.rangeValue.endDate;
+    } else {
+      this.tempSingleDate = this.singleValue;
+    }
+
+    this.originalLeftMonthDate = new Date(this.leftMonthDate);
+    this.originalRightMonthDate = new Date(this.rightMonthDate);
+
+    this.leftYearPickerPage = 0;
+    this.rightYearPickerPage = 0;
+
+    this.isOpen = true;
+
+    setTimeout(() => {
+      this.updateDropdownPosition();
+      this.addRepositionListeners();
+    }, 0);
+  }
+
+  getDropdownStyle(): any {
+    if (!this.trigger) return {};
+
+    const position = this.calculatePosition();
+    return {
+      'position': 'fixed',
+      'left': position.left,
+      'top': position.top,
+      'z-index': '10000'
+    };
+  }
+
+  private calculatePosition(): { top: string; left: string } {
+    const triggerElement = this.trigger.nativeElement;
+    const rect = triggerElement.getBoundingClientRect();
+
+    let dropdownWidth = this.rangeMode ? 830 : 320;
+    let dropdownHeight = this.rangeMode ? 520 : 400;
+
+    if (this.dropdown) {
+      const dropdownElement = this.dropdown.nativeElement;
+      const dropdownRect = dropdownElement.getBoundingClientRect();
+
+      if (dropdownRect.width > 0) {
+        dropdownWidth = dropdownRect.width;
+      } else {
+        dropdownWidth = window.innerWidth < 768 ? 280 : (this.rangeMode ? 830 : 320);
+      }
+
+      if (dropdownRect.height > 0) {
+        dropdownHeight = dropdownRect.height;
+      }
+    } else {
+      dropdownWidth = window.innerWidth < 768 ? 280 : (this.rangeMode ? 830 : 320);
+    }
+
+    const spaceOnRight = window.innerWidth - rect.left;
+
+    let left = rect.left;
+
+    if (spaceOnRight < dropdownWidth) {
+      left = rect.right - dropdownWidth;
+
+      if (left < 0) {
+        left = Math.max(8, window.innerWidth - dropdownWidth - 8);
+      }
+    }
+
+    if (window.innerWidth < 768) {
+      const centeredLeft = rect.left + (rect.width / 2) - (dropdownWidth / 2);
+      const minLeft = 8;
+      const maxLeft = window.innerWidth - dropdownWidth - 8;
+
+      left = Math.max(minLeft, Math.min(centeredLeft, maxLeft));
+    }
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    let top = rect.bottom + 4;
+
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      top = rect.top - dropdownHeight - 4;
+    }
+
+    return {
+      top: `${top}px`,
+      left: `${left}px`
+    };
+  }
+
+  closeDropdown(): void {
+    this.leftMonthDate = new Date(this.originalLeftMonthDate);
+    this.rightMonthDate = new Date(this.originalRightMonthDate);
+
+    if (this.rangeMode) {
+      this.tempStartDate = this.rangeValue.startDate;
+      this.tempEndDate = this.rangeValue.endDate;
+    } else {
+      this.tempSingleDate = this.singleValue;
+    }
+
+    this.updateCalendarDays();
+    this.removeRepositionListeners();
+    this.isOpen = false;
+    this.hoverDate = null;
+    this.showLeftMonthPicker = false;
+    this.showRightMonthPicker = false;
+  }
+
+  private addRepositionListeners(): void {
+    const scrollHandler = () => this.updateDropdownPosition();
+    const resizeHandler = () => this.updateDropdownPosition();
+
+    window.addEventListener('scroll', scrollHandler, true);
+    this.scrollHandler = () => window.removeEventListener('scroll', scrollHandler, true);
+
+    window.addEventListener('resize', resizeHandler);
+    this.resizeHandler = () => window.removeEventListener('resize', resizeHandler);
+  }
+
+  private removeRepositionListeners(): void {
+    if (this.scrollHandler) {
+      this.scrollHandler();
+      this.scrollHandler = null;
+    }
+
+    if (this.resizeHandler) {
+      this.resizeHandler();
+      this.resizeHandler = null;
+    }
+  }
+
+  private updateDropdownPosition(): void {
+    if (!this.trigger) return;
+    this.dropdownPosition = this.calculatePosition();
+  }
+
+  getDisplayValue(): string {
+    if (this.rangeMode) {
+      if (this.rangeValue.startDate && this.rangeValue.endDate) {
+        const start = this.formatDateShort(this.rangeValue.startDate);
+        const end = this.formatDateShort(this.rangeValue.endDate);
+        return `${start} - ${end}`;
+      }
+    } else {
+      if (this.singleValue) {
+        return this.formatDateShort(this.singleValue);
+      }
+    }
+    return '';
+  }
+
+  formatDateShort(date: Date): string {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  }
+
+  generateCalendarDays(monthDate: Date): CalendarDay[] {
+    const year = monthDate.getFullYear();
+    const month = monthDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    let startDay = firstDay.getDay() - 1;
+    if (startDay === -1) startDay = 6;
+
+    const days: CalendarDay[] = [];
+
+    const prevMonthLastDay = new Date(year, month, 0);
+    for (let i = startDay - 1; i >= 0; i--) {
+      const date = new Date(year, month - 1, prevMonthLastDay.getDate() - i);
+      date.setHours(0, 0, 0, 0);
+      days.push(this.createCalendarDay(date, false));
+    }
+
+    for (let day = 1; day <= lastDay.getDate(); day++) {
+      const date = new Date(year, month, day);
+      date.setHours(0, 0, 0, 0);
+      days.push(this.createCalendarDay(date, true));
+    }
+
+    const remainingDays = 42 - days.length;
+    for (let day = 1; day <= remainingDays; day++) {
+      const date = new Date(year, month + 1, day);
+      date.setHours(0, 0, 0, 0);
+      days.push(this.createCalendarDay(date, false));
+    }
+
+    return days;
+  }
+
+  private createCalendarDay(date: Date, isCurrentMonth: boolean): CalendarDay {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const dateOnly = new Date(date);
+    dateOnly.setHours(0, 0, 0, 0);
+
+    const isToday = dateOnly.getTime() === today.getTime();
+
+    let isSelected = false;
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let isInRange = false;
+
+    if (this.rangeMode) {
+      const startDate = this.tempStartDate ? new Date(this.tempStartDate) : null;
+      const endDate = this.tempEndDate ? new Date(this.tempEndDate) : null;
+
+      if (startDate) startDate.setHours(0, 0, 0, 0);
+      if (endDate) endDate.setHours(0, 0, 0, 0);
+
+      isRangeStart = isCurrentMonth && startDate ? dateOnly.getTime() === startDate.getTime() : false;
+      isRangeEnd = isCurrentMonth && endDate ? dateOnly.getTime() === endDate.getTime() : false;
+      isSelected = isRangeStart || isRangeEnd;
+
+      if (isCurrentMonth && startDate && endDate) {
+        isInRange = dateOnly > startDate && dateOnly < endDate;
+      } else if (isCurrentMonth && startDate && this.hoverDate && !endDate) {
+        const hoverDateOnly = new Date(this.hoverDate);
+        hoverDateOnly.setHours(0, 0, 0, 0);
+        if (hoverDateOnly > startDate) {
+          isInRange = dateOnly > startDate && dateOnly < hoverDateOnly;
+        }
+      }
+    } else {
+      const selectedDate = this.tempSingleDate ? new Date(this.tempSingleDate) : null;
+      if (selectedDate) selectedDate.setHours(0, 0, 0, 0);
+      isSelected = isCurrentMonth && selectedDate ? dateOnly.getTime() === selectedDate.getTime() : false;
+    }
+
+    const isDisabled = !isCurrentMonth || this.isDateDisabled(date);
+
+    return {
+      date,
+      isCurrentMonth,
+      isToday,
+      isSelected,
+      isInRange,
+      isRangeStart,
+      isRangeEnd,
+      isDisabled
+    };
+  }
+
+  private isDateDisabled(date: Date): boolean {
+    if (this.minDate && date < this.minDate) return true;
+    if (this.maxDate && date > this.maxDate) return true;
+    return false;
+  }
+
+  trackByDate(index: number, day: CalendarDay): string {
+    return day.date.getTime().toString();
+  }
+
+  isInRange(date: Date): boolean {
+    if (!this.rangeMode) return false;
+
+    const dateOnly = new Date(date);
+    dateOnly.setHours(0, 0, 0, 0);
+
+    const startDate = this.tempStartDate ? new Date(this.tempStartDate) : null;
+    const endDate = this.tempEndDate ? new Date(this.tempEndDate) : null;
+
+    if (startDate) startDate.setHours(0, 0, 0, 0);
+    if (endDate) endDate.setHours(0, 0, 0, 0);
+
+    if (startDate && endDate) {
+      return dateOnly > startDate && dateOnly < endDate;
+    } else if (startDate && this.hoverDate && !endDate) {
+      const hoverDateOnly = new Date(this.hoverDate);
+      hoverDateOnly.setHours(0, 0, 0, 0);
+      if (hoverDateOnly > startDate) {
+        return dateOnly > startDate && dateOnly < hoverDateOnly;
+      }
+    }
+    return false;
+  }
+
+  onDayClick(day: CalendarDay): void {
+    if (day.isDisabled) return;
+
+    const clickedDate = new Date(day.date);
+    clickedDate.setHours(0, 0, 0, 0);
+
+    if (this.rangeMode) {
+      this.selectedFilter = '' as FilterOption;
+
+      if (!this.tempStartDate || (this.tempStartDate && this.tempEndDate)) {
+        this.tempStartDate = clickedDate;
+        this.tempEndDate = null;
+        this.hoverDate = null;
+      } else if (this.tempStartDate && !this.tempEndDate) {
+        const startDate = new Date(this.tempStartDate);
+        startDate.setHours(0, 0, 0, 0);
+
+        if (clickedDate.getTime() === startDate.getTime()) {
+          this.tempEndDate = clickedDate;
+        } else if (clickedDate > startDate) {
+          this.tempEndDate = clickedDate;
+        } else {
+          this.tempEndDate = startDate;
+          this.tempStartDate = clickedDate;
+        }
+        this.hoverDate = null;
+      }
+    } else {
+      this.tempSingleDate = clickedDate;
+      // Auto-apply for single date mode
+      this.apply();
+      return;
+    }
+
+    this.updateCalendarDays();
+  }
+
+  onDayHover(day: CalendarDay): void {
+    if (day.isDisabled || !this.rangeMode) return;
+    this.hoverDate = day.date;
+  }
+
+  onDayLeave(): void {
+    this.hoverDate = null;
+  }
+
+  previousMonth(): void {
+    if (!this.canNavigatePreviousMonth()) return;
+    this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() - 1, 1);
+    if (this.rangeMode) {
+      this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), this.rightMonthDate.getMonth() - 1, 1);
+    }
+    this.updateCalendarDays();
+  }
+
+  nextMonth(): void {
+    if (!this.canNavigateNextMonth()) return;
+    this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() + 1, 1);
+    if (this.rangeMode) {
+      this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), this.rightMonthDate.getMonth() + 1, 1);
+    }
+    this.updateCalendarDays();
+  }
+
+  canNavigatePreviousMonth(): boolean {
+    if (!this.minDate) return true;
+
+    const newLeftMonth = new Date(this.leftMonthDate.getFullYear(), this.leftMonthDate.getMonth() - 1, 1);
+    const minDateMonth = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1);
+
+    return newLeftMonth >= minDateMonth;
+  }
+
+  canNavigateNextMonth(): boolean {
+    if (!this.maxDate) return true;
+
+    const checkMonth = this.rangeMode ? this.rightMonthDate : this.leftMonthDate;
+    const newMonth = new Date(checkMonth.getFullYear(), checkMonth.getMonth() + 1, 1);
+    const maxDateMonth = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), 1);
+
+    return newMonth <= maxDateMonth;
+  }
+
+  getMonthYear(date: Date): string {
+    return `${this.months[date.getMonth()]} ${date.getFullYear()}`;
+  }
+
+  selectFilter(filter: FilterOption): void {
+    this.selectedFilter = filter;
+    this.applyFilter(filter);
+    this.updateCalendarDays();
+  }
+
+  private applyFilter(filter: FilterOption): void {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    let startDate: Date | null = null;
+    let endDate: Date | null = null;
+
+    switch (filter) {
+      case 'hoy':
+        startDate = new Date(today);
+        endDate = new Date(today);
+        break;
+      case 'ayer':
+        startDate = new Date(today);
+        startDate.setDate(startDate.getDate() - 1);
+        endDate = new Date(startDate);
+        break;
+      case 'esta-semana':
+        startDate = this.getStartOfWeek(today);
+        endDate = new Date(today);
+        break;
+      case 'semana-pasada':
+        const lastWeekEnd = new Date(this.getStartOfWeek(today));
+        lastWeekEnd.setDate(lastWeekEnd.getDate() - 1);
+        startDate = this.getStartOfWeek(lastWeekEnd);
+        endDate = lastWeekEnd;
+        break;
+      case 'este-mes':
+        startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+        endDate = new Date(today);
+        break;
+      case 'mes-pasado':
+        startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+        endDate = new Date(today.getFullYear(), today.getMonth(), 0);
+        break;
+      case 'este-ano':
+        startDate = new Date(today.getFullYear(), 0, 1);
+        endDate = new Date(today);
+        break;
+      case 'ano-pasado':
+        startDate = new Date(today.getFullYear() - 1, 0, 1);
+        endDate = new Date(today.getFullYear() - 1, 11, 31);
+        break;
+      case 'mostrar-todo':
+        startDate = null;
+        endDate = null;
+        break;
+    }
+
+    this.tempStartDate = startDate;
+    this.tempEndDate = endDate;
+
+    if (startDate) {
+      this.leftMonthDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+      this.rightMonthDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1);
+    } else {
+      const currentDate = new Date();
+      this.leftMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+      this.rightMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+    }
+  }
+
+  private getStartOfWeek(date: Date): Date {
+    const day = date.getDay();
+    const diff = day === 0 ? -6 : 1 - day;
+    const startOfWeek = new Date(date);
+    startOfWeek.setDate(date.getDate() + diff);
+    return startOfWeek;
+  }
+
+  cancel(): void {
+    if (this.rangeMode) {
+      this.tempStartDate = this.rangeValue.startDate;
+      this.tempEndDate = this.rangeValue.endDate;
+    } else {
+      this.tempSingleDate = this.singleValue;
+    }
+    this.selectedFilter = '';
+
+    this.leftMonthDate = new Date(this.originalLeftMonthDate);
+    this.rightMonthDate = new Date(this.originalRightMonthDate);
+
+    this.updateCalendarDays();
+    this.closeDropdown();
+  }
+
+  apply(): void {
+    if (this.rangeMode) {
+      this.rangeValue = {
+        startDate: this.tempStartDate,
+        endDate: this.tempEndDate
+      };
+      this.onChange(this.rangeValue);
+    } else {
+      this.singleValue = this.tempSingleDate;
+      this.onChange(this.singleValue);
+    }
+
+    this.originalLeftMonthDate = new Date(this.leftMonthDate);
+    this.originalRightMonthDate = new Date(this.rightMonthDate);
+
+    this.onTouched();
+
+    this.removeRepositionListeners();
+    this.isOpen = false;
+    this.hoverDate = null;
+    this.showLeftMonthPicker = false;
+    this.showRightMonthPicker = false;
+  }
+
+  getStartDateDisplay(): string {
+    if (this.tempStartDate) {
+      return this.formatDateForInput(this.tempStartDate);
+    }
+    return 'Fecha inicio';
+  }
+
+  getEndDateDisplay(): string {
+    if (this.tempEndDate) {
+      return this.formatDateForInput(this.tempEndDate);
+    }
+    return 'Fecha fin';
+  }
+
+  private formatDateForInput(date: Date): string {
+    const day = date.getDate();
+    const month = date.toLocaleString('es-ES', { month: 'short' });
+    const year = date.getFullYear();
+    return `${day} ${month} ${year}`;
+  }
+
+  toggleLeftMonthPicker(event: Event): void {
+    event.stopPropagation();
+    this.showLeftMonthPicker = !this.showLeftMonthPicker;
+    this.showRightMonthPicker = false;
+    if (this.showLeftMonthPicker) {
+      this.leftYearPickerPage = 0;
+    }
+  }
+
+  toggleRightMonthPicker(event: Event): void {
+    event.stopPropagation();
+    this.showRightMonthPicker = !this.showRightMonthPicker;
+    this.showLeftMonthPicker = false;
+    if (this.showRightMonthPicker) {
+      this.rightYearPickerPage = 0;
+    }
+  }
+
+  getLeftYears(): number[] {
+    const currentYear = this.leftMonthDate.getFullYear();
+    const baseYear = currentYear + (this.leftYearPickerPage * this.yearsPerPage);
+    const years: number[] = [];
+
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      const year = baseYear - 5 + i;
+      years.push(year);
+    }
+
+    return years;
+  }
+
+  getRightYears(): number[] {
+    const currentYear = this.rightMonthDate.getFullYear();
+    const baseYear = currentYear + (this.rightYearPickerPage * this.yearsPerPage);
+    const years: number[] = [];
+
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      const year = baseYear - 5 + i;
+      years.push(year);
+    }
+
+    return years;
+  }
+
+  previousLeftYearPage(event: Event): void {
+    event.stopPropagation();
+    this.leftYearPickerPage--;
+  }
+
+  nextLeftYearPage(event: Event): void {
+    event.stopPropagation();
+    this.leftYearPickerPage++;
+  }
+
+  previousRightYearPage(event: Event): void {
+    event.stopPropagation();
+    this.rightYearPickerPage--;
+  }
+
+  nextRightYearPage(event: Event): void {
+    event.stopPropagation();
+    this.rightYearPickerPage++;
+  }
+
+  isMonthDisabled(monthIndex: number, calendarDate: Date): boolean {
+    const testDate = new Date(calendarDate.getFullYear(), monthIndex, 1);
+
+    if (this.minDate) {
+      const minDateMonth = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1);
+      if (testDate < minDateMonth) return true;
+    }
+
+    if (this.maxDate) {
+      const maxDateMonth = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), 1);
+      if (testDate > maxDateMonth) return true;
+    }
+
+    return false;
+  }
+
+  isYearDisabled(year: number): boolean {
+    if (this.minDate && year < this.minDate.getFullYear()) return true;
+    if (this.maxDate && year > this.maxDate.getFullYear()) return true;
+    return false;
+  }
+
+  getLeftYearRangeLabel(): string {
+    const years = this.getLeftYears();
+    return `${years[0]} - ${years[years.length - 1]}`;
+  }
+
+  getRightYearRangeLabel(): string {
+    const years = this.getRightYears();
+    return `${years[0]} - ${years[years.length - 1]}`;
+  }
+
+  canNavigateLeftYearsPrevious(): boolean {
+    if (!this.minDate && !this.maxDate) return true;
+
+    const currentYear = this.leftMonthDate.getFullYear();
+    const baseYear = currentYear + ((this.leftYearPickerPage - 1) * this.yearsPerPage);
+
+    const previousPageYears: number[] = [];
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      previousPageYears.push(baseYear - 5 + i);
+    }
+
+    return previousPageYears.some(year => !this.isYearDisabled(year));
+  }
+
+  canNavigateLeftYearsNext(): boolean {
+    if (!this.minDate && !this.maxDate) return true;
+
+    const currentYear = this.leftMonthDate.getFullYear();
+    const baseYear = currentYear + ((this.leftYearPickerPage + 1) * this.yearsPerPage);
+
+    const nextPageYears: number[] = [];
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      nextPageYears.push(baseYear - 5 + i);
+    }
+
+    return nextPageYears.some(year => !this.isYearDisabled(year));
+  }
+
+  canNavigateRightYearsPrevious(): boolean {
+    if (!this.minDate && !this.maxDate) return true;
+
+    const currentYear = this.rightMonthDate.getFullYear();
+    const baseYear = currentYear + ((this.rightYearPickerPage - 1) * this.yearsPerPage);
+
+    const previousPageYears: number[] = [];
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      previousPageYears.push(baseYear - 5 + i);
+    }
+
+    return previousPageYears.some(year => !this.isYearDisabled(year));
+  }
+
+  canNavigateRightYearsNext(): boolean {
+    if (!this.minDate && !this.maxDate) return true;
+
+    const currentYear = this.rightMonthDate.getFullYear();
+    const baseYear = currentYear + ((this.rightYearPickerPage + 1) * this.yearsPerPage);
+
+    const nextPageYears: number[] = [];
+    for (let i = 0; i < this.yearsPerPage; i++) {
+      nextPageYears.push(baseYear - 5 + i);
+    }
+
+    return nextPageYears.some(year => !this.isYearDisabled(year));
+  }
+
+  selectLeftMonth(monthIndex: number, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.leftMonthDate = new Date(this.leftMonthDate.getFullYear(), monthIndex, 1);
+    if (this.rangeMode) {
+      this.rightMonthDate = new Date(this.leftMonthDate.getFullYear(), monthIndex + 1, 1);
+    }
+    this.updateCalendarDays();
+    this.showLeftMonthPicker = false;
+  }
+
+  selectRightMonth(monthIndex: number, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.rightMonthDate = new Date(this.rightMonthDate.getFullYear(), monthIndex, 1);
+    this.leftMonthDate = new Date(this.rightMonthDate.getFullYear(), monthIndex - 1, 1);
+    this.updateCalendarDays();
+    this.showRightMonthPicker = false;
+  }
+
+  selectLeftYear(year: number, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.leftMonthDate = new Date(year, this.leftMonthDate.getMonth(), 1);
+    if (this.rangeMode) {
+      this.rightMonthDate = new Date(year, this.leftMonthDate.getMonth() + 1, 1);
+    }
+    this.updateCalendarDays();
+    this.showLeftMonthPicker = false;
+  }
+
+  selectRightYear(year: number, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.rightMonthDate = new Date(year, this.rightMonthDate.getMonth(), 1);
+    this.leftMonthDate = new Date(year, this.rightMonthDate.getMonth() - 1, 1);
+    this.updateCalendarDays();
+    this.showRightMonthPicker = false;
+  }
+
+  writeValue(value: DatePickerValue): void {
+    if (this.rangeMode) {
+      const rangeVal = value as DateRange;
+      this.rangeValue = rangeVal || { startDate: null, endDate: null };
+      this.tempStartDate = this.rangeValue.startDate;
+      this.tempEndDate = this.rangeValue.endDate;
+    } else {
+      this.singleValue = value as Date | null;
+      this.tempSingleDate = this.singleValue;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  public resetDatePicker(): void {
+    if (this.rangeMode) {
+      this.rangeValue = { startDate: null, endDate: null };
+      this.tempStartDate = null;
+      this.tempEndDate = null;
+      this.onChange(this.rangeValue);
+    } else {
+      this.singleValue = null;
+      this.tempSingleDate = null;
+      this.onChange(this.singleValue);
+    }
+    this.selectedFilter = '';
+
+    this.initializeDates();
+    this.updateCalendarDays();
+  }
+}