npm package: @mishelshaji/ngx-datepicker
Description: A lightweight, standalone Angular date picker component with a customizable, CSS-styled calendar UI. Designed for seamless integration into Angular applications, it supports reactive forms, accessibility, and flexible configuration options such as minimum
Latest version: 0.0.2

# NGX Date Picker
A lightweight, standalone Angular date picker component with a customizable, CSS-styled calendar UI. Designed for seamless integration into Angular applications, it supports reactive forms, accessibility, and flexible configuration options such as minimum/maximum date constraints, external trigger elements, and programmatic popup control.

Features
- Compatibility: Compatible with Angular 16+ applications.
- Customizable Calendar UI: Includes month and year dropdowns for easy navigation, styled with pure CSS (no external frameworks).
- Reactive Forms Integration: Binds to a FormControl for robust form handling.
- Date Constraints: Optional minDate and maxDate inputs to restrict selectable dates.
- External Trigger Support: Bind the calendar to any HTML element (e.g., button or input) with optional automatic click binding.
- Hidden Input Option: Hide the built-in text input for custom UI integration.
- Programmatic Control: Public open() and close() methods to control the calendar popup.
- Keyboard Accessibility: Supports Enter/Space to toggle the calendar (when using built-in input) and Enter to select dates.
- No External Dependencies: Pure Angular and CSS, ensuring a lightweight package.

## Installation

Install the package via npm:
```
npm install @mishelshaji/angular-date-picker
```

Ensure your project uses Angular 16 or later, as the component relies on standalone component features and reactive forms.

## Usage

Import the DatePickerComponent into your component or application and use the `<ms-date-picker>` 
selector. The component supports various configurations, including binding to external elements, 
hiding the built-in input, and setting date constraints.

### Basic Example
Use the date picker with its default text input:

```ts
import { Component } from '@angular/core';
import { DatePickerComponent } from '@mishelshaji/ngx-date-picker';

@Component({
selector: 'app-root',
standalone: true,
imports: [DatePickerComponent],
template: `
    <ms-date-picker (dateChange)="onDateChange($event)"></ms-date-picker>
  `
})
export class AppComponent {
  onDateChange(date: string) {
    console.log('Selected date:', date);
  }
}
```

### Example with Programmatic Control
Use the `open()` and `close()` methods to control the calendar programmatically:

```ts
import { Component, ViewChild } from '@angular/core';
import { DatePickerComponent } from '@mishelshaji/angular-date-picker';

@Component({
selector: 'app-root',
standalone: true,
imports: [DatePickerComponent],
template: `
    <button (click)="datePicker.open()">Show Calendar</button>
    <button (click)="datePicker.close()">Hide Calendar</button>
    <ms-date-picker
      #datePicker
      [disabled]="false"
      (dateChange)="onDateChange($event)"
    ></ms-date-picker>
  `
})
export class AppComponent {
  @ViewChild('datePicker') datePicker?: DatePickerComponent;
  
  onDateChange(date: string) {
    console.log('Selected date:', date);
  }
}
```