### Setup development environment

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Commands to clone the repository and install necessary dependencies.

```bash
git clone https://github.com/Gramli/angular-mydatepicker.git
cd angular-mydatepicker
npm install
```

--------------------------------

### Run demo application

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Starts the development server for the demo application.

```bash
npm start
# Navigate to http://localhost:4200
```

--------------------------------

### Install angular-mydatepicker

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Install the library using npm. This command adds the package to your project's dependencies.

```bash
npm install gramli-angular-mydatepicker
```

--------------------------------

### Create local package

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Builds the library and creates a tarball for local installation.

```bash
npm run build-lib
cd dist/angular-mydatepicker
npm pack
# Install in your project:
# npm install path/to/gramli-angular-mydatepicker-x.y.z.tgz
```

--------------------------------

### Basic Date Picker Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Configure the basic date picker with `dateFormat` and `firstDayOfWeek` options. This example sets the date format to 'dd.mm.yyyy' and the first day of the week to Monday.

```typescript
import {
  IAngularMyDpOptions
} from 'gramli-angular-mydatepicker';

myOptions: IAngularMyDpOptions = {
  dateFormat: 'dd.mm.yyyy',
  firstDayOfWeek: 'mo'
};
```

--------------------------------

### Date Picker with Locale Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Customize the datepicker's locale and date format. This example sets the date format to 'dd/mm/yyyy' and applies the French locale.

```typescript
myOptions: IAngularMyDpOptions = {
  dateFormat: 'dd/mm/yyyy'
};
```

--------------------------------

### Handle range date selection

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Processes selection events specifically in date range mode to identify start or end dates.

```typescript
onRangeSelection(event) {
  console.log(event.isBegin ? 'Start date:' : 'End date:', event.formatted);
}
```

--------------------------------

### Build library

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Compiles the library into the dist folder.

```bash
npm run build-lib
# Output: dist/angular-mydatepicker/
```

--------------------------------

### Test and lint library

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Commands to execute unit tests with coverage and run the linter.

```bash
# Run tests with coverage
npm run test-lib
# Coverage report available in test-output/

# Run linter
npm run lint-lib
```

--------------------------------

### Default View Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-ngmodel/date-picker-ngmodel.html

Iterates through available default view options.

```html
Default view: @for (df of defaultViews; track df) { {{df}} }
```

--------------------------------

### Selector Size Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-ngmodel/date-picker-ngmodel.html

Iterates through available selector size options.

```html
Selector size: @for (s of selectorSizes; track s) { {{s}} }
```

--------------------------------

### Calendar Animation Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-ngmodel/date-picker-ngmodel.html

Iterates through available calendar animation options.

```html
Calendar animation: @for (a of calAnimations; track a) { {{a}} }
```

--------------------------------

### Configuration Options

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Overview of the configuration options available for the angular-mydatepicker component, categorized by functionality.

```APIDOC
## Configuration Options

### Description
Configure the behavior, appearance, and constraints of the datepicker component.

### Core Options
- **dateRange** (boolean) - Optional - Enable date range picker mode (Default: false)
- **inline** (boolean) - Optional - Display calendar inline (Default: false)
- **dateFormat** (string) - Optional - Date format (Default: 'yyyy-mm-dd')
- **defaultView** (DefaultView) - Optional - Initial calendar view: 'date', 'month', or 'year' (Default: 'date')
- **firstDayOfWeek** (string) - Optional - First day of week: 'mo', 'tu', 'we', 'th', 'fr', 'sa', 'su' (Default: 'mo')

### Date Constraints
- **disableUntil** (IMyDate) - Optional - Disable all dates before this date
- **disableSince** (IMyDate) - Optional - Disable all dates after this date
- **disableDates** (IMyDate[]) - Optional - Disable specific dates
- **disableDateRanges** (IMyDateRange[]) - Optional - Disable date ranges
- **disableWeekends** (boolean) - Optional - Disable Saturdays and Sundays

### Styling & Highlighting
- **markDates** (IMyMarkedDates[]) - Optional - Mark dates with colors or custom styles
- **highlightDates** (IMyDate[]) - Optional - Highlight specific dates in red
- **stylesData** (IMyStyles) - Optional - Override default styles
```

--------------------------------

### Implement Datepicker Event Handlers

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Demonstrates how to bind event emitters in the template and implement corresponding handler methods in the component class to track calendar interactions.

```typescript
// component.ts
import { Component } from '@angular/core';
import {
  IAngularMyDpOptions,
  IMyDateModel,
  IMyInputFieldChanged,
  IMyCalendarViewChanged,
  IMyRangeDateSelection,
  ActiveView
} from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-event-handlers',
  template: `
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="options"
      (dateChanged)="onDateChanged($event)"
      (inputFieldChanged)="onInputFieldChanged($event)"
      (calendarViewChanged)="onCalendarViewChanged($event)"
      (calendarToggle)="onCalendarToggle($event)"
      (rangeDateSelection)="onRangeDateSelection($event)"
      (viewActivated)="onViewActivated($event)"
    />

    <div class="event-log">
      <h4>Event Log:</h4>
      <pre>{{ eventLog }}</pre>
    </div>
  `
})
export class EventHandlersComponent {
  model: IMyDateModel = null;
  eventLog: string = '';

  options: IAngularMyDpOptions = {
    dateRange: true,  // Enable to test range events
    dateFormat: 'dd.mm.yyyy'
  };

  // Fired when date is selected, cleared, or input is valid
  onDateChanged(event: IMyDateModel): void {
    if (event.isRange) {
      this.log('dateChanged (range)', {
        begin: event.dateRange?.beginDate,
        end: event.dateRange?.endDate,
        formatted: event.dateRange?.formatted,
        beginEpoc: event.dateRange?.beginEpoc,
        endEpoc: event.dateRange?.endEpoc
      });
    } else {
      this.log('dateChanged (single)', {
        date: event.singleDate?.date,
        jsDate: event.singleDate?.jsDate,
        formatted: event.singleDate?.formatted,
        epoc: event.singleDate?.epoc
      });
    }
  }

  // Fired when input field value changes
  onInputFieldChanged(event: IMyInputFieldChanged): void {
    this.log('inputFieldChanged', {
      value: event.value,
      dateFormat: event.dateFormat,
      valid: event.valid
    });
  }

  // Fired when calendar view (month/year) changes
  onCalendarViewChanged(event: IMyCalendarViewChanged): void {
    this.log('calendarViewChanged', {
      year: event.year,
      month: event.month,
      first: event.first,  // First day of the month
      last: event.last     // Last day of the month
    });
  }

  // Fired when calendar opens or closes
  // Reason codes: 1=opened, 2=closed by date select, 3=closed by button,
  //               4=closed by outside click, 5=closed by ESC key
  onCalendarToggle(reason: number): void {
    const reasons = {
      1: 'Calendar opened',
      2: 'Closed by date selection',
      3: 'Closed by calendar button',
      4: 'Closed by outside click',
      5: 'Closed by ESC key'
    };
    this.log('calendarToggle', { reason: reasons[reason] || reason });
  }

  // Fired when selecting dates in range mode
  onRangeDateSelection(event: IMyRangeDateSelection): void {
    this.log('rangeDateSelection', {
      isBegin: event.isBegin,
      date: event.date,
      formatted: event.formatted
    });
  }

  // Fired when calendar view changes between date/month/year
  // ActiveView: 1=date view, 2=month view, 3=year view
  onViewActivated(view: ActiveView): void {
    const views = { 1: 'Date view', 2: 'Month view', 3: 'Year view' };
    this.log('viewActivated', { view: views[view] || view });
  }

  private log(eventName: string, data: any): void {
    const entry = `[${new Date().toLocaleTimeString()}] ${eventName}: ${JSON.stringify(data, null, 2)}\n`;
    this.eventLog = entry + this.eventLog;
  }
}
```

--------------------------------

### Configure Default Month

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Define the initial month displayed when the calendar opens using either a string or an object format.

```typescript
// String format
defaultMonth: '08-2019'

// Object format
defaultMonth: {
  defMonth: '08/2019',
  overrideSelection: true  // Show this month even if a date is selected
}
```

--------------------------------

### Configure Angular MyDatePicker Options

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use the IAngularMyDpOptions interface to define calendar behavior, date constraints, styling, and localization. Ensure the module is imported from 'gramli-angular-mydatepicker'.

```typescript
// Complete options interface
import {
  IAngularMyDpOptions,
  DefaultView,
  CalAnimation
} from 'gramli-angular-mydatepicker';

const completeOptions: IAngularMyDpOptions = {
  // === Core Options ===
  dateRange: false,                    // Enable date range picker mode
  inline: false,                       // Display calendar inline (use type="hidden" input)
  dateFormat: 'yyyy-mm-dd',           // Date format pattern
  defaultView: DefaultView.Date,       // Initial view: Date, Month, or Year
  firstDayOfWeek: 'mo',               // First day: 'mo', 'tu', 'we', 'th', 'fr', 'sa', 'su'

  // === Calendar Size ===
  selectorHeight: '266px',             // Calendar popup height
  selectorWidth: '266px',              // Calendar popup width

  // === Date Constraints ===
  disableUntil: { year: 0, month: 0, day: 0 },    // Disable dates before
  disableSince: { year: 0, month: 0, day: 0 },    // Disable dates after
  disableDates: [],                    // Array of specific dates to disable
  disableDateRanges: [],               // Array of date ranges to disable
  disableWeekends: false,              // Disable Saturdays and Sundays
  disableWeekdays: [],                 // Array of weekdays to disable: ['tu', 'we']
  enableDates: [],                     // Enable specific dates (overrides disable)
  minYear: 1000,                       // Minimum selectable year
  maxYear: 9999,                       // Maximum selectable year

  // === Highlighting & Marking ===
  markCurrentDay: true,                // Mark current day with underline
  markCurrentMonth: true,              // Mark current month in month view
  markCurrentYear: true,               // Mark current year in year view
  sunHighlight: true,                  // Highlight Sundays in red
  satHighlight: false,                 // Highlight Saturdays in red
  highlightDates: [],                  // Specific dates to highlight in red
  markDates: [],                       // Mark dates with custom colors/styles
  markWeekends: { marked: false, color: '' },  // Mark weekends with color

  // === Display Options ===
  showWeekNumbers: false,              // Display ISO week numbers
  showMonthNumber: true,               // Show month number in month view
  monthSelector: true,                 // Enable month selector in header
  yearSelector: true,                  // Enable year selector in header
  disableHeaderButtons: false,         // Disable prev/next month buttons
  showSelectorArrow: true,             // Show arrow pointing to input
  showFooterToday: false,              // Show "Today" button in footer
  todayTxt: 'Today',                   // Text for today button

  // === Position & Behavior ===
  alignSelectorRight: false,           // Align calendar to right of input
  openSelectorTopOfInput: false,       // Open calendar above input
  appendSelectorToBody: false,         // Append calendar to body (for modals)
  closeSelectorOnDateSelect: true,     // Close on date selection
  closeSelectorOnDocumentClick: true,  // Close on outside click
  focusInputOnDateSelect: true,        // Focus input after date selection
  moveFocusByArrowKeys: true,          // Navigate with arrow keys

  // === Date Range Options ===
  dateRangeDatesDelimiter: ' - ',      // Delimiter between range dates

  // === Validation ===
  inputFieldValidation: true,          // Validate input field on blur

  // === Animation ===
  calendarAnimation: {
    in: CalAnimation.None,             // Open animation
    out: CalAnimation.None             // Close animation
  },
  viewChangeAnimation: true,           // Animate view transitions

  // === RTL Support ===
  rtl: false,                          // Enable right-to-left mode

  // === Custom Labels ===
  dayLabels: { su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat' },
  monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mar', /* ... */ 12: 'Dec' },

  // === Accessibility ===
  ariaLabelPrevMonth: 'Previous Month',
  ariaLabelNextMonth: 'Next Month',

  // === Custom Styles ===
  stylesData: {
    selector: 'custom-dp',
    styles: '.custom-dp .myDpSelectedDay { background-color: blue; }'
  },

  // === Div Host Element (advanced) ===
  divHostElement: {
    enabled: false,
    placeholder: ''
  }
};
```

--------------------------------

### Basic Date Picker Template

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

HTML template for a basic date picker using `ngModel` for data binding and the configured `myOptions` for customization.

```html
<input angular-mydatepicker [(ngModel)]="model" [options]="myOptions" />
```

--------------------------------

### Component Events API

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Documentation for component event emitters used to handle user interactions within the date picker.

```APIDOC
## dateChanged

### Description
Emitted when a date is selected, cleared, or input is valid.

### Parameters
- **event** (IMyDateModel) - Required - The event object containing date information.

### Event Structure
- **isRange** (boolean) - True if date range mode is active.
- **singleDate** (object) - Contains date, jsDate, formatted, and epoc (when isRange is false).
- **dateRange** (object) - Contains beginDate, beginJsDate, beginEpoc, endDate, endJsDate, endEpoc, and formatted (when isRange is true).

## inputFieldChanged

### Description
Emitted on input field changes.

### Parameters
- **event** (IMyInputFieldChanged) - Required - Contains the current value and validity status.

## calendarViewChanged

### Description
Emitted when the calendar view changes (month/year).

### Parameters
- **event** (IMyCalendarViewChanged) - Required - Contains month and year values.

## calendarToggle

### Description
Emitted when calendar opens or closes.

### Parameters
- **reason** (number) - Required - Reason code: 1 (Opened), 2 (Date select), 3 (Button), 4 (Outside click), 5 (ESC key).

## rangeDateSelection

### Description
Emitted in date range mode when a date is selected.

### Parameters
- **event** (object) - Required - Contains isBegin (boolean) and formatted (string) date.

## viewActivated

### Description
Emitted when calendar view changes (date/month/year).

### Parameters
- **view** (ActiveView) - Required - View type: 1 (date), 2 (month), 3 (year).
```

--------------------------------

### Configure Date Range Selection

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Enable date range mode by setting dateRange to true in options and handling selection events.

```typescript
// component.ts
import { Component } from '@angular/core';
import {
  IAngularMyDpOptions,
  IMyDateModel,
  IMyRangeDateSelection
} from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-daterange-picker',
  template: `
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="rangeOptions"
      (dateChanged)="onDateRangeChanged($event)"
      (rangeDateSelection)="onRangeSelection($event)"
      placeholder="Select date range"
    />
    <p *ngIf="model">Selected: {{ model.dateRange?.formatted }}</p>
  `
})
export class DateRangePickerComponent {
  rangeOptions: IAngularMyDpOptions = {
    dateRange: true,
    dateFormat: 'dd.mm.yyyy',
    dateRangeDatesDelimiter: ' - ',
    firstDayOfWeek: 'mo'
  };

  model: IMyDateModel = null;

  // Set initial date range programmatically
  setDateRange(): void {
    const begin: Date = new Date();
    const end: Date = new Date();
    end.setDate(end.getDate() + 7);

    this.model = {
      isRange: true,
      singleDate: null,
      dateRange: {
        beginJsDate: begin,
        endJsDate: end
      }
    };
  }

  // Alternative: Set using IMyDate objects
  setDateRangeWithMyDate(): void {
    const today = new Date();
    this.model = {
      isRange: true,
      singleDate: null,
      dateRange: {
        beginDate: { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() },
        endDate: { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() + 7 }
      }
    };
  }

  onDateRangeChanged(event: IMyDateModel): void {
    if (event.isRange && event.dateRange) {
      console.log('Begin:', event.dateRange.beginDate);
      console.log('End:', event.dateRange.endDate);
      console.log('Formatted:', event.dateRange.formatted);
    }
  }

  onRangeSelection(event: IMyRangeDateSelection): void {
    console.log(event.isBegin ? 'Start date selected:' : 'End date selected:', event.formatted);
  }
}
```

--------------------------------

### Date Range Picker Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Configure the datepicker for date range selection by setting `dateRange` to `true`. The `dateFormat` option remains applicable.

```typescript
myRangeOptions: IAngularMyDpOptions = {
  dateRange: true,
  dateFormat: 'dd.mm.yyyy'
};
```

--------------------------------

### Directive Methods

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Methods available to control the datepicker programmatically via a template reference variable.

```APIDOC
## Directive Methods

### Description
Access these methods using a template reference variable (e.g., #dp="angular-mydatepicker").

### Methods
- **dp.openCalendar()** - Open the calendar
- **dp.closeCalendar()** - Close the calendar
- **dp.toggleCalendar()** - Toggle calendar (returns true if opened)
- **dp.clearDate()** - Clear the selected date/range
- **dp.isDateValid()** - Check if current input is valid
- **dp.headerAction(action)** - Trigger header button action
- **dp.setHostValue(value)** - Set input box value
```

--------------------------------

### Component TypeScript Configuration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Define component properties for datepicker options and model binding. Import necessary interfaces like `IAngularMyDpOptions` and `IMyDateModel`.

```typescript
import {
  IAngularMyDpOptions,
  IMyDateModel
} from 'gramli-angular-mydatepicker';

export class MyComponent {
  myOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy'
  };
  
  model: IMyDateModel = null;
}
```

--------------------------------

### Access Directive Methods

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Use a template reference variable to access and trigger methods on the datepicker instance.

```html
<input angular-mydatepicker #dp="angular-mydatepicker" />
```

--------------------------------

### Import AngularMyDatePickerModule

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Register the module in your application's root or feature module to enable the datepicker directive.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularMyDatePickerModule } from 'gramli-angular-mydatepicker';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMyDatePickerModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Configure Datepicker Locales

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Apply internationalization by setting the locale attribute on the input element or binding it dynamically to support over 40 built-in languages.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-localized-datepicker',
  template: `
    <!-- French locale -->
    <input
      angular-mydatepicker
      [(ngModel)]="frenchDate"
      [options]="options"
      locale="fr"
      placeholder="Sélectionnez une date"
    />

    <!-- German locale -->
    <input
      angular-mydatepicker
      [(ngModel)]="germanDate"
      [options]="options"
      locale="de"
      placeholder="Datum auswählen"
    />

    <!-- Japanese locale -->
    <input
      angular-mydatepicker
      [(ngModel)]="japaneseDate"
      [options]="options"
      locale="ja"
      placeholder="日付を選択"
    />

    <!-- Dynamic locale switching -->
    <select (change)="changeLocale($event)">
      <option value="en">English</option>
      <option value="fr">French</option>
      <option value="de">German</option>
      <option value="es">Spanish</option>
      <option value="zh-cn">Chinese</option>
      <option value="ar">Arabic</option>
    </select>
    <input
      angular-mydatepicker
      [(ngModel)]="dynamicDate"
      [options]="options"
      [locale]="currentLocale"
    />
  `
})
export class LocalizedDatepickerComponent {
  options: IAngularMyDpOptions = {
    dateFormat: 'dd/mm/yyyy'
  };

  frenchDate: IMyDateModel = null;
  germanDate: IMyDateModel = null;
  japaneseDate: IMyDateModel = null;
  dynamicDate: IMyDateModel = null;
  currentLocale: string = 'en';

  // Supported locales: en, fr, fr-ch, ja, fi, es, hu, sv, nl, ru, uk, uz, no, tr,
  // pt-br, pt, de, de-ch, it, it-ch, pl, my, ms, sk, sl, zh-cn, he, ro, ca, id,
  // en-au, en-gb, am-et, cs, el, kk, th, ko-kr, da, lt, vi, bn, bg, hr, ar, is, tw, lv, et

  changeLocale(event: Event): void {
    this.currentLocale = (event.target as HTMLSelectElement).value;
  }
}
```

--------------------------------

### Implement Date Range Selection

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-inline/date-picker-inline.html

Use these conditional blocks to enable date range functionality within the component template.

```html
@if (myDatePickerOptions.dateRange) { Range today + 3 }
```

```html
@if (myDatePickerOptions.dateRange) { Range yesterday + 3 }
```

--------------------------------

### Handle view activation

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Triggered when the calendar view mode changes between date, month, or year views.

```typescript
onViewActivated(view: ActiveView) {
  // 1 = date view, 2 = month view, 3 = year view
}
```

--------------------------------

### Locale Iteration

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-ngmodel/date-picker-ngmodel.html

Iterates through available locales to display them in the template.

```html
Locale: @for (l of locales; track l) { {{l}} }
```

--------------------------------

### Style Color Override

Source: https://github.com/gramli/angular-mydatepicker/blob/master/example/app/date-picker-ngmodel/date-picker-ngmodel.html

Iterates through available style color overrides.

```html
Override styles: @for (c of styleColor; track c) { {{c}} }
```

--------------------------------

### Implement Inline Calendar Mode

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Configure the datepicker to display inline by setting the inline option to true within the IAngularMyDpOptions object.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-inline-calendar',
  template: `
    <div class="calendar-container">
      <input
        type="hidden"
        angular-mydatepicker
        [(ngModel)]="model"
        [options]="inlineOptions"
        (dateChanged)="onDateChanged($event)"
      />
    </div>
    <p>Selected: {{ selectedDate }}</p>
  `
})
export class InlineCalendarComponent {
  inlineOptions: IAngularMyDpOptions = {
    inline: true,
    dateRange: false,
    dateFormat: 'dd.mm.yyyy',
    showFooterToday: true,
    todayTxt: 'Today'
  };

  model: IMyDateModel = null;
  selectedDate: string = '';

  onDateChanged(event: IMyDateModel): void {
    if (!event.isRange && event.singleDate?.formatted) {
      this.selectedDate = event.singleDate.formatted;
    }
  }
}
```

--------------------------------

### Mark and Highlight Dates in Angular MyDatePicker

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Apply visual indicators to dates using highlightDates, markDates, and custom CSS via stylesData. Custom styles require a unique selector to scope the CSS rules.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel, IMyDate } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-marked-dates',
  template: `
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="options"
      placeholder="Select date"
    />
  `
})
export class MarkedDatesComponent {
  model: IMyDateModel = null;

  options: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',

    // Mark current day with underline
    markCurrentDay: true,
    markCurrentMonth: true,
    markCurrentYear: true,

    // Highlight Sundays in red
    sunHighlight: true,

    // Highlight Saturdays in red
    satHighlight: true,

    // Highlight specific dates in red
    highlightDates: [
      { year: 2024, month: 12, day: 25 },
      { year: 2024, month: 12, day: 31 }
    ],

    // Mark weekends with custom color
    markWeekends: {
      marked: true,
      color: 'blue'
    },

    // Mark dates with custom colors
    markDates: [
      {
        dates: [
          { year: 2024, month: 6, day: 15 },
          { year: 2024, month: 6, day: 16 }
        ],
        color: '#ff0000'  // Red for important dates
      },
      {
        dates: [
          { year: 2024, month: 6, day: 20 },
          { year: 2024, month: 6, day: 21 }
        ],
        color: '#00ff00'  // Green for available dates
      },
      {
        dates: [
          { year: 2024, month: 6, day: 25 }
        ],
        color: 'orange',
        styleClass: 'special-event'  // Custom CSS class
      }
    ],

    // Custom styles for marked dates
    stylesData: {
      selector: 'dp1',
      styles: `
        .dp1 .special-event {
          background: repeating-linear-gradient(
            -45deg, orange 7px, #ccc 8px, transparent 7px, transparent 14px
          );
        }
      `
    }
  };
}
```

--------------------------------

### Handle calendar view changes

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Triggered when the calendar view changes, providing the current month and year.

```typescript
onViewChanged(event: IMyCalendarViewChanged) {
  console.log('Month:', event.month, 'Year:', event.year);
}
```

--------------------------------

### Import AngularMyDatePickerModule

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Import `AngularMyDatePickerModule` into your application's root or feature module to enable the datepicker component. Ensure FormsModule and ReactiveFormsModule are also imported if you plan to use them.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  FormsModule,
  ReactiveFormsModule
} from '@angular/forms';
import {
  AngularMyDatePickerModule
} from 'gramli-angular-mydatepicker';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMyDatePickerModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Iterate Through Months in Angular Template

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/month-view/month-view.component.html

Use nested @for loops to iterate through months and their days. Ensure proper tracking of items.

```html
@for (mr of months; track mr) { @for (m of mr; track m) { } }
```

--------------------------------

### Handle date selection events

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Use this handler to process date selection events, distinguishing between single dates and date ranges.

```typescript
onDateChanged(event: IMyDateModel) {
  if (event.isRange) {
    console.log('Range:', event.dateRange);
  } else {
    console.log('Date:', event.singleDate);
  }
}
```

--------------------------------

### Configure and Toggle Calendar Animations

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use the calendarAnimation property within IAngularMyDpOptions to define entry and exit animations. Ensure a new options object is created when updating settings to trigger Angular change detection.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel, CalAnimation } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-animated-datepicker',
  template: `
    <select (change)="changeAnimation($event)">
      <option value="none">No Animation</option>
      <option value="fade">Fade</option>
      <option value="scaleTop">Scale from Top</option>
      <option value="scaleCenter">Scale from Center</option>
      <option value="rotate">Rotate</option>
      <option value="flipDiagonal">Flip Diagonal</option>
    </select>
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="options"
      #dp="angular-mydatepicker"
    />
    <button (click)="dp.toggleCalendar()">Toggle Calendar</button>
  `
})
export class AnimatedDatepickerComponent {
  model: IMyDateModel = null;

  options: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',
    calendarAnimation: {
      in: CalAnimation.Fade,
      out: CalAnimation.Fade
    },
    viewChangeAnimation: true  // Enable animation when switching month/year views
  };

  changeAnimation(event: Event): void {
    const animation = (event.target as HTMLSelectElement).value;
    let animConfig: { in: CalAnimation; out: CalAnimation };

    switch (animation) {
      case 'none':
        animConfig = { in: CalAnimation.None, out: CalAnimation.None };
        break;
      case 'fade':
        animConfig = { in: CalAnimation.Fade, out: CalAnimation.Fade };
        break;
      case 'scaleTop':
        animConfig = { in: CalAnimation.ScaleTop, out: CalAnimation.ScaleCenter };
        break;
      case 'scaleCenter':
        animConfig = { in: CalAnimation.ScaleCenter, out: CalAnimation.ScaleTop };
        break;
      case 'rotate':
        animConfig = { in: CalAnimation.Rotate, out: CalAnimation.Rotate };
        break;
      case 'flipDiagonal':
        animConfig = { in: CalAnimation.FlipDiagonal, out: CalAnimation.FlipDiagonal };
        break;
      default:
        animConfig = { in: CalAnimation.None, out: CalAnimation.None };
    }

    // Update options (must create new object for change detection)
    this.options = { ...this.options, calendarAnimation: animConfig };
  }
}
```

--------------------------------

### Conditionally Display Month Number and Name

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/month-view/month-view.component.html

Use @if to conditionally display the month number if 'opts.showMonthNumber' is true, followed by the month name.

```html
@if (opts.showMonthNumber) { {{m.nbr}} } {{m.name}}
```

--------------------------------

### Conditional Rendering in Angular Template

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/calendar/calendar.component.html

These snippets demonstrate conditional rendering based on component state variables like selectMonth, selectYear, and showFooterToday. Ensure these variables are properly managed in your component's TypeScript file.

```html
@if (!selectMonth && !selectYear) { }
```

```html
@if (selectMonth) { }
```

```html
@if (selectYear) { }
```

```html
@if (opts.showFooterToday) { }
```

--------------------------------

### Reactive Forms Usage

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Integrate the datepicker into reactive forms by binding it to a `FormControl` using the `[formControl]` input. Customization is also available via `[options]`.

```html
<input 
  angular-mydatepicker
  [formControl]="myDateControl"
  [options]="myOptions"
/>
```

--------------------------------

### Inline Mode Usage

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Implement inline datepicker mode by setting the `inline` option to `true`. A hidden input is used to manage the model binding.

```html
<input 
  type="hidden"
  angular-mydatepicker 
  [(ngModel)]="model" 
  [options]="{inline: true}"
/>
```

--------------------------------

### Date Display

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/day-view/day-view.component.html

Displays the day number within the calendar. This is a simple interpolation used to show the current day's numerical value.

```html
{{d}}
```

--------------------------------

### Configure Default Month in Angular Component

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use the defaultMonth input to set the initial calendar view. The configuration supports both simple string formats and objects with overrideSelection to force the calendar to a specific month.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel, IMyDefaultMonth } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-default-month',
  template: `
    <!-- Simple string format -->
    <input
      angular-mydatepicker
      [(ngModel)]="model1"
      [options]="options"
      [defaultMonth]="'08-2024'"
      placeholder="Opens to August 2024"
    />

    <!-- Object format with override -->
    <input
      angular-mydatepicker
      [(ngModel)]="model2"
      [options]="options"
      [defaultMonth]="defaultMonthConfig"
      placeholder="Always opens to specified month"
    />
  `
})
export class DefaultMonthComponent {
  model1: IMyDateModel = null;
  model2: IMyDateModel = null;

  options: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy'
  };

  // Object format with overrideSelection
  // When overrideSelection is true, calendar always opens to this month
  // even if a date is already selected
  defaultMonthConfig: IMyDefaultMonth = {
    defMonth: '12/2024',  // Can use '/' or '-' as separator
    overrideSelection: true
  };

  // Calendar opens to:
  // 1. The selected date's month (if date selected and overrideSelection is false)
  // 2. The defaultMonth if specified (or if overrideSelection is true)
  // 3. The current month if neither above applies
}
```

--------------------------------

### Custom Datepicker Styling with stylesData

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use the stylesData option to apply custom CSS to the datepicker. This allows for complete visual customization. Ensure the selector in stylesData matches the class applied to the datepicker input.

```typescript
import {
  Component
} from '@angular/core';
import {
  IAngularMyDpOptions,
  IMyDateModel
} from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-custom-styled-datepicker',
  template: `
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="darkThemeOptions"
      placeholder="Dark theme datepicker"
    />
    <input
      angular-mydatepicker
      [(ngModel)]="model2"
      [options]="blueThemeOptions"
      placeholder="Blue theme datepicker"
    />
  `
})
export class CustomStyledDatepickerComponent {
  model: IMyDateModel = null;
  model2: IMyDateModel = null;

  darkThemeOptions: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',
    selectorHeight: '266px',
    selectorWidth: '266px',
    stylesData: {
      selector: 'dark-dp',
      styles: `
        .dark-dp .myDpIconLeftArrow,
        .dark-dp .myDpIconRightArrow,
        .dark-dp .myDpHeaderBtn {
          color: #fff;
        }
        .dark-dp .myDpCurrMonth,
        .dark-dp .myDpMonthcell,
        .dark-dp .myDpYearcell {
          color: #fff;
          font-weight: bold;
        }
        .dark-dp .myDpWeekDayTitle {
          background-color: #6c757d;
          color: #fff;
          font-weight: bold;
        }
        .dark-dp .myDpDaycell,
        .dark-dp .myDpMonthcell,
        .dark-dp .myDpYearcell {
          background-color: #6c757d;
        }
        .dark-dp .myDpSelector,
        .dark-dp .myDpMonthYearSelBar,
        .dark-dp .myDpFooterBar {
          background-color: #6c757d;
        }
        .dark-dp .myDpSelectedDay,
        .dark-dp .myDpSelectedMonth,
        .dark-dp .myDpSelectedYear {
          background-color: #aaa;
          color: #fff;
          box-shadow: inset 0 0 0 1px #fff;
        }
        .dark-dp .myDpTableSingleDay:hover {
          background-color: #ddd;
          color: #000;
        }
        .dark-dp .myDpMarkCurrDay {
          border-bottom: 2px solid #fff;
        }
      `
    }
  };

  blueThemeOptions: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',
    stylesData: {
      selector: 'blue-dp',
      styles: `
        .blue-dp .myDpHeaderBtn { color: #3855c1; }
        .blue-dp .myDpCurrMonth { color: #3855c1; font-weight: bold; }
        .blue-dp .myDpWeekDayTitle { color: #3855c1; font-weight: bold; }
        .blue-dp .myDpMarkCurrDay { border-bottom: 2px solid #3855c1; }
        .blue-dp .myDpTableSingleDay:hover { background-color: #add8e6; }
        .blue-dp .myDpSelectedDay { background-color: #8EBFFF; }
        .blue-dp .myDpRangeColor { background-color: #dbeaff; }
      `
    }
  };
}
```

--------------------------------

### Date Picker with Locale Template

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

HTML template for a datepicker with a specified locale. The `locale` attribute is used to set the language, e.g., 'fr' for French.

```html
<input angular-mydatepicker [(ngModel)]="model" [options]="myOptions" locale="fr" />
```

--------------------------------

### Handle input field changes

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Processes changes to the input field, providing the current value and validity status.

```typescript
onInputChanged(event: IMyInputFieldChanged) {
  console.log('Value:', event.value);
  console.log('Valid:', event.valid);
}
```

--------------------------------

### Implement Basic Date Picker with ngModel

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use the angular-mydatepicker directive with ngModel for two-way data binding and access component methods via template reference.

```typescript
// component.ts
import { Component } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel } from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-basic-datepicker',
  template: `
    <input
      angular-mydatepicker
      name="myDate"
      [(ngModel)]="model"
      [options]="myOptions"
      #dp="angular-mydatepicker"
      (dateChanged)="onDateChanged($event)"
      placeholder="Select date"
    />
    <button type="button" (click)="dp.toggleCalendar()">Toggle</button>
    <button type="button" (click)="dp.clearDate()">Clear</button>
  `
})
export class BasicDatepickerComponent {
  myOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy',
    firstDayOfWeek: 'mo',
    sunHighlight: true,
    markCurrentDay: true
  };

  model: IMyDateModel = null;

  onDateChanged(event: IMyDateModel): void {
    console.log('Selected date:', event.singleDate?.formatted);
    console.log('JavaScript Date:', event.singleDate?.jsDate);
    console.log('Epoch timestamp:', event.singleDate?.epoc);
  }
}
```

--------------------------------

### Calendar View Rendering Logic

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/day-view/day-view.component.html

This Angular template logic handles the conditional display of week numbers and iterates through days and weeks to render the calendar. It's used for displaying the calendar grid.

```html
@if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') { } @for (d of weekDays; track d) { } @for (w of dates; track w) { @if (opts.showWeekNumbers && opts.firstDayOfWeek==='mo') { } @for (d of w.week; track d) { } }
```

--------------------------------

### Set Locale Attribute

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Apply a specific locale to the datepicker using the locale attribute with an ISO 639-1 language code.

```html
<input angular-mydatepicker [(ngModel)]="model" locale="fr" />
```

--------------------------------

### Week Number Display

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/day-view/day-view.component.html

Displays the week number. This interpolation is used to show the week number for a given date range.

```html
{{w.weekNbr}}
```

--------------------------------

### Marked Date Display

Source: https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/components/day-view/day-view.component.html

Conditionally displays the day number if the date is marked and has a color defined. This is used to highlight specific dates in the calendar.

```html
@if (d.markedDate.marked && d.markedDate.color.length) { } {{d.dateObj.day}}
```

--------------------------------

### Control Angular MyDatePicker Directive Methods

Source: https://context7.com/gramli/angular-mydatepicker/llms.txt

Use a template reference variable to access directive methods for programmatic control. Ensure ChangeDetectorRef is injected for certain methods like toggleCalendar.

```typescript
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import {
  IAngularMyDpOptions,
  IMyDateModel,
  AngularMyDatePickerDirective,
  HeaderAction
} from 'gramli-angular-mydatepicker';

@Component({
  selector: 'app-directive-methods',
  template: `
    <input
      angular-mydatepicker
      [(ngModel)]="model"
      [options]="options"
      #dp="angular-mydatepicker"
    />

    <div class="controls">
      <button (click)="openCalendar()">Open</button>
      <button (click)="closeCalendar()">Close</button>
      <button (click)="toggleCalendar()">Toggle</button>
      <button (click)="clearDate()">Clear</button>
      <button (click)="checkValidity()">Validate</button>
      <button (click)="navigatePrevMonth()">Prev Month</button>
      <button (click)="navigateNextMonth()">Next Month</button>
      <button (click)="setCustomValue()">Set Value</button>
    </div>

    <p>Calendar is: {{ isOpen ? 'Open' : 'Closed' }}</p>
    <p>Input is valid: {{ isValid }}</p>
  `
})
export class DirectiveMethodsComponent {
  @ViewChild('dp', { static: true }) datepicker: AngularMyDatePickerDirective;

  model: IMyDateModel = null;
  isOpen: boolean = false;
  isValid: boolean = false;

  options: IAngularMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',
    closeSelectorOnDateSelect: false  // Keep calendar open after selection
  };

  constructor(private cdr: ChangeDetectorRef) {}

  openCalendar(): void {
    this.cdr.detectChanges();
    this.datepicker.openCalendar();
    this.isOpen = true;
  }

  closeCalendar(): void {
    this.datepicker.closeCalendar();
    this.isOpen = false;
  }

  toggleCalendar(): void {
    this.cdr.detectChanges();
    this.isOpen = this.datepicker.toggleCalendar() ?? false;
  }

  clearDate(): void {
    this.datepicker.clearDate();
  }

  checkValidity(): boolean {
    this.isValid = this.datepicker.isDateValid();
    return this.isValid;
  }

  navigatePrevMonth(): void {
    this.datepicker.headerAction(HeaderAction.PrevBtnClick);
  }

  navigateNextMonth(): void {
    this.datepicker.headerAction(HeaderAction.NextBtnClick);
  }

  setCustomValue(): void {
    // Directly set the input field value
    this.datepicker.setHostValue('15.06.2024');
  }
}

```

--------------------------------

### Template-driven Forms Usage

Source: https://github.com/gramli/angular-mydatepicker/blob/master/README.md

Use the `angular-mydatepicker` directive in your HTML template with `[(ngModel)]` for template-driven forms. The `[options]` input allows for customization.

```html
<input 
  angular-mydatepicker 
  name="mydate"
  [(ngModel)]="model" 
  [options]="myOptions"
  #dp="angular-mydatepicker" 
/>
```