{"id":33312743,"url":"https://github.com/ngxsmk/ngxsmk-datepicker","last_synced_at":"2026-02-25T17:21:29.623Z","repository":{"id":318718812,"uuid":"1072600122","full_name":"NGXSMK/ngxsmk-datepicker","owner":"NGXSMK","description":"A powerful, modern, and highly customizable Angular date range picker with built-in time selection.","archived":false,"fork":false,"pushed_at":"2026-01-31T18:17:05.000Z","size":13534,"stargazers_count":27,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-01T00:13:58.267Z","etag":null,"topics":["angular","angular-form-controls","angular-signals","angular-timepicker","angular-ui-library","booking-system-ui","calendar","custom-date-picker","datepicker","flight-reservation-calendar","i18n","ionic-framework","material-design-alternative","ngx-components","range-picker","standalone","timepicker","typescript","typescript-ui","zoneless"],"latest_commit_sha":null,"homepage":"https://ngxsmk.github.io/ngxsmk-datepicker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NGXSMK.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-10-09T00:33:38.000Z","updated_at":"2026-01-31T19:03:47.000Z","dependencies_parsed_at":"2026-01-16T08:14:25.912Z","dependency_job_id":null,"html_url":"https://github.com/NGXSMK/ngxsmk-datepicker","commit_stats":null,"previous_names":["toozuuu/ngxsmk-datepicker","ngxsmk/ngxsmk-datepicker"],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/NGXSMK/ngxsmk-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NGXSMK%2Fngxsmk-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NGXSMK%2Fngxsmk-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NGXSMK%2Fngxsmk-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NGXSMK%2Fngxsmk-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NGXSMK","download_url":"https://codeload.github.com/NGXSMK/ngxsmk-datepicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NGXSMK%2Fngxsmk-datepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29130099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T18:55:47.139Z","status":"ssl_error","status_checked_at":"2026-02-05T18:55:04.010Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-form-controls","angular-signals","angular-timepicker","angular-ui-library","booking-system-ui","calendar","custom-date-picker","datepicker","flight-reservation-calendar","i18n","ionic-framework","material-design-alternative","ngx-components","range-picker","standalone","timepicker","typescript","typescript-ui","zoneless"],"created_at":"2025-11-19T07:04:49.808Z","updated_at":"2026-02-25T17:21:29.606Z","avatar_url":"https://github.com/NGXSMK.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n  SEO Keywords: Angular DatePicker, Angular Date Range Picker, Lightweight Calendar Component, Angular Signals DatePicker, SSR Ready DatePicker, Zoneless Angular, A11y DatePicker, Mobile-Friendly DatePicker, Ionic DatePicker\n  Meta Description: The most powerful, lightweight, and accessible date and range picker for modern Angular (17-21+). Built with Signals, Zoneless-ready, and zero dependencies.\n--\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"projects/ngxsmk-datepicker/docs/header-banner.png\" alt=\"ngxsmk-datepicker - Lightweight Angular Date Range Picker\" width=\"100%\" /\u003e\n\n# **ngxsmk-datepicker** – Modern Angular Date Picker \u0026 Range Picker\n\n### _The Gold Standard for Premium Angular Calendar Selection_\n\n[![npm version](https://img.shields.io/npm/v/ngxsmk-datepicker.svg?style=flat-square\u0026color=6d28d9)](https://www.npmjs.com/package/ngxsmk-datepicker)\n[![Angular](https://img.shields.io/badge/Angular-17%2B-DD0031.svg?style=flat-square\u0026logo=angular)](https://angular.io/)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/LICENSE)\n[![Bundle Size](https://img.shields.io/badge/bundle-~127KB-success.svg?style=flat-square)](https://bundlephobia.com/package/ngxsmk-datepicker)\n[![Zoneless](https://img.shields.io/badge/Zoneless-Ready-blueviolet.svg?style=flat-square)](https://angular.dev/guide/zoneless)\n\n**`npm i ngxsmk-datepicker`**\n\n[Explore Live Demo](https://ngxsmk.github.io/ngxsmk-datepicker/) • [API Documentation](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/API.md) • [Submit Issue](https://github.com/NGXSMK/ngxsmk-datepicker/issues)\n\n\u003c/div\u003e\n\n---\n\n**Last updated:** February 25, 2026 · **Current stable:** v2.2.0\n\n### **Overview**\n\n**ngxsmk-datepicker** is a high-performance, enterprise-ready date and range picker engineered for the modern Angular ecosystem (v17+). Built from the ground up with **Angular Signals**, it delivers a seamless, zoneless-ready experience for both desktop and mobile (Ionic) applications.\n\n\u003e **Stable Release**: `v2.2.0` is live! This release brings a **TypeScript Strictness Overhaul** (eliminating `any` types and ensuring `exactOptionalPropertyTypes` compatibility), fixes **appendToBody** popover positioning, datepicker-in-modal first-open behavior, and popover width matching the input; it also reduces loading time and cleans up CSS. No breaking changes.\n\u003e\n\u003e ⚠️ **Important**: Versions 2.0.10 and 2.0.11 are broken and have been unpublished. Please use v2.2.0 or later.\n\n---\n\n### **📌 Table of Contents**\n\n1. [📷 Screenshots](#-screenshots)\n2. [✨ Features](#-features)\n3. [📋 Compatibility](#-compatibility)\n4. [🌍 Localization (i18n)](#-localization-i18n)\n5. [📦 Installation](#-installation)\n6. [🚀 Quick Start](#-quick-start)\n7. [🔌 Framework Integration](#-framework-integration)\n8. [⚙️ API Reference](#-api-reference)\n9. [🎨 Theming](#-theming)\n10. [⌨️ Keyboard Navigation](#-keyboard-navigation)\n\n---\n\n## 📷 Screenshots\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/NGXSMK/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/1.png\" alt=\"Angular Standalone DatePicker Single Selection Mode\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://github.com/NGXSMK/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/2.png\" alt=\"Angular Date Range Picker Selection Mode\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://github.com/NGXSMK/ngxsmk-datepicker/raw/main/projects/ngxsmk-datepicker/docs/3.png\" alt=\"Mobile Angular DatePicker Ionic Compatibility\" width=\"30%\" /\u003e\n\u003c/p\u003e\n\n## **✨ Features**\n\n### **Core Capabilities**\n\n- 💎 **Signal-Driven Engine**: Hyper-reactive state management using Angular Signals.\n- 🌓 **Native Dark Mode**: Beautifully crafted themes for light and dark environments.\n- 📱 **Mobile-First UX**: Native mobile picker integration with touch gestures and haptic feedback.\n- 🧩 **Zero Dependencies**: Lightweight standalone component with no external bloat.\n- ⚡ **Performance++**: Lazy-loaded calendar months, memoized calculations, and tree-shakable architecture.\n\n### **Advanced Functionality**\n\n- 📅 **Google Calendar Sync**: Built-in support for seamlessly syncing and displaying events natively from Google Calendar.\n- 🌐 **8-Language i18n**: Full localization for `en`, `de`, `es`, `sv`, `ko`, `zh`, `ja`, and `fr`.\n- 🛠️ **Plugin Architecture**: Extend functionality via hooks for rendering, validation, and shortcuts.\n- 🧪 **Signal Forms Native**: Direct integration with Angular 21's new Signal Forms API.\n- 🚀 **Zoneless Ready**: Optimized for the future of Angular—works perfectly without zone.js.\n- ♿ **Full Accessibility**: WAI-ARIA compliant with extensive keyboard navigation support.\n\n## **📋 Compatibility**\n\nFor detailed compatibility information, see [COMPATIBILITY.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/COMPATIBILITY.md).\n\n### Quick Reference\n\n| Angular Version | Status             | Core Features | Signal Forms | SSR | Zoneless |\n| --------------- | ------------------ | ------------- | ------------ | --- | -------- |\n| Angular 17      | ✅ Fully Supported | ✅ All        | ❌           | ✅  | ✅       |\n| Angular 18      | ✅ Fully Supported | ✅ All        | ❌           | ✅  | ✅       |\n| Angular 19      | ✅ Fully Supported | ✅ All        | ❌           | ✅  | ✅       |\n| Angular 20      | ✅ Fully Supported | ✅ All        | ❌           | ✅  | ✅       |\n| Angular 21      | ✅ Fully Supported | ✅ All        | ✅           | ✅  | ✅       |\n| Angular 22+     | 🔄 Future Support  | ✅ All        | ✅           | ✅  | ✅       |\n\n**Zone.js**: Optional - The library works with or without Zone.js (zoneless apps supported)\n\n**SSR**: ✅ Fully compatible with Angular Universal and server-side rendering\n\n**Peer Dependencies**: `@angular/core \u003e=17.0.0 \u003c24.0.0`\n\n## **🔒 API Stability \u0026 Deprecation Policy**\n\n### API Stability Guarantees\n\n- **Public API**: All public APIs (inputs, outputs, methods) are stable within a major version\n- **Experimental Features**: Features marked as `experimental` may change in minor versions\n- **Internal APIs**: Private methods and internal services are not part of the public API and may change without notice\n\n### Deprecation Policy\n\n- **Deprecation Period**: Features are deprecated for at least **2 major versions** before removal\n- **Deprecation Warnings**:\n  - `@deprecated` JSDoc tags in code\n  - Console warnings in development mode\n  - Clear documentation in CHANGELOG.md\n- **Migration Guides**: Provided in `MIGRATION.md` for all breaking changes\n- **Breaking Changes**: Only occur in major version releases (semver)\n\n### Stable APIs\n\nThe following are considered stable public APIs:\n\n- Component inputs and outputs (`@Input()`, `@Output()`)\n- Public methods documented in API docs\n- Exported types and interfaces\n- Service APIs (when marked as public)\n\n### Experimental Features\n\nFeatures marked as experimental may change:\n\n- Signal Forms support (`[field]` input) - Experimental in v1.9.x, stable in v2.0.0+\n- Some advanced selection modes\n- Plugin architecture hooks (subject to refinement)\n\nFor details, see [CONTRIBUTING.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CONTRIBUTING.md#deprecation-policy).\n\n## **📦 Installation**\n\n```bash\nnpm install ngxsmk-datepicker@2.2.0\n```\n\n### Alternative installation\n\nYou can install without npm using any of these methods (peer dependencies must still be installed in your app):\n\n| Method | Command |\n|--------|--------|\n| **Yarn** | `yarn add ngxsmk-datepicker@2.2.0` |\n| **pnpm** | `pnpm add ngxsmk-datepicker@2.2.0` |\n| **Bun** | `bun add ngxsmk-datepicker@2.2.0` |\n| **From Git** | `npm install github:NGXSMK/ngxsmk-datepicker#v2.2.0` (requires the repo to have built output or you build from source) |\n| **Local path** | Build the library in the repo (`npx ng build ngxsmk-datepicker`), then `npm install /path/to/ngxsmk-datepicker/dist/ngxsmk-datepicker` |\n| **CDN (ESM)** | Use [unpkg](https://unpkg.com/ngxsmk-datepicker@2.2.0/) or [jsDelivr](https://cdn.jsdelivr.net/npm/ngxsmk-datepicker@2.2.0/) in your bundler or import map; peer dependencies (Angular, etc.) must be installed in your app. |\n\nFor all options and caveats, see [docs/INSTALLATION.md](docs/INSTALLATION.md).\n\n## **Usage**\n\nngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.\n\n### Signal Forms (Angular 21)\n\nYou can bind directly to a writable Signal using standard two-way binding. This works seamlessly alongside traditional Reactive Forms.\n\n```ts\nimport { signal } from \"@angular/core\";\nimport { DatepickerValue } from \"ngxsmk-datepicker\";\n\nexport class MyComponent {\n  dateSig = signal\u003cDatepickerValue\u003e(null);\n}\n```\n\n```html\n\u003cngxsmk-datepicker mode=\"single\" [value]=\"dateSig()\" (valueChange)=\"dateSig.set($event)\"\u003e \u003c/ngxsmk-datepicker\u003e\n\n\u003cp\u003eSignal value: {{ dateSig() | json }}\u003c/p\u003e\n```\n\nThis pattern is also compatible with computed/linked signals produced by `httpResource`, enabling powerful data flows with Angular 21.\n\n### Signal Forms with `[field]` Input (Angular 21+)\n\nFor direct integration with Angular Signal Forms, use the `[field]` input. The datepicker automatically tracks dirty state when using this binding:\n\n```typescript\nimport { Component, signal, form, objectSchema } from \"@angular/core\";\nimport { NgxsmkDatepickerComponent } from \"ngxsmk-datepicker\";\n\n@Component({\n  selector: \"app-form\",\n  standalone: true,\n  imports: [NgxsmkDatepickerComponent],\n  template: `\n    \u003cform\u003e\n      \u003cngxsmk-datepicker [field]=\"myForm.dateInQuestion\" mode=\"single\" placeholder=\"Select a date\"\u003e \u003c/ngxsmk-datepicker\u003e\n    \u003c/form\u003e\n  `,\n})\nexport class FormComponent {\n  localObject = signal({ dateInQuestion: new Date() });\n\n  myForm = form(\n    this.localObject,\n    objectSchema({\n      dateInQuestion: objectSchema\u003cDate\u003e(),\n    }),\n  );\n}\n```\n\nThe `[field]` input provides automatic two-way binding with signal forms - no manual event handling needed! It also automatically tracks the form's dirty state, so `form().dirty()` will return `true` after a user selects a date.\n\nFor detailed Signal Forms integration including dirty state tracking, see the [Signal Forms Integration Guide](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/signal-forms.md).\n\n### Documentation\n\n- **[Plugin Architecture](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/PLUGIN-ARCHITECTURE.md)** - Complete guide to the plugin architecture and hook system\n- **[Signals Integration Guide](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/signals.md)** - Complete guide to using signals with the datepicker\n- **[Signal Forms Guide](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/signal-forms.md)** - Deep dive into Signal Forms integration\n- **[SSR Guide](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/ssr.md)** - Server-side rendering setup and best practices\n- **[SSR Example](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/SSR-EXAMPLE.md)** - Complete Angular Universal example with hydration notes\n- **[Extension Points Guide](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/extension-points.md)** - Customization hooks and extension points\n- **[Theme Tokens Reference](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/THEME-TOKENS.md)** - Complete CSS custom properties reference with examples\n- **[API Documentation](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/projects/ngxsmk-datepicker/docs/API.md)** - Complete public API reference\n\n#### **1. Import the Component**\n\nIn your component file (e.g., app.component.ts), import the component (or the module—see troubleshooting below).\n\n    import { Component } from '@angular/core';\n    import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';\n\n    @Component({\n      selector: 'app-root',\n      standalone: true,\n      imports: [NgxsmkDatepickerComponent],\n      templateUrl: './app.component.html',\n    })\n    export class AppComponent {\n      // Example for predefined ranges\n      public myRanges: DateRange = {\n        'Today': [new Date(), new Date()],\n        'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],\n        'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],\n      };\n\n      // Example for disabling weekends\n      isWeekend = (date: Date): boolean =\u003e {\n        const day = date.getDay();\n        return day === 0 || day === 6; // Sunday or Saturday\n      };\n\n      onDateChange(value: Date | { start: Date; end: Date } | Date[]) {\n        console.log('Date changed:', value);\n      }\n    }\n\n**If you see NG1010** (`'imports' must be an array... Value could not be determined statically`) when using the Angular compiler plugin or in strict AOT builds, use the wrapper module instead: `import { NgxsmkDatepickerModule } from 'ngxsmk-datepicker'` and set `imports: [NgxsmkDatepickerModule]`. The template stays the same (`\u003cngxsmk-datepicker\u003e`).\n\n#### **2. Add it to Your Template**\n\nUse the `\u003cngxsmk-datepicker\u003e` selector in your HTML template.\n\n````html\n\u003ch2\u003eAdvanced Date Range Picker\u003c/h2\u003e\n\n\u003cngxsmk-datepicker [mode]=\"'range'\" [ranges]=\"myRanges\" [showTime]=\"true\" [minuteInterval]=\"15\" [minDate]=\"today\" [isInvalidDate]=\"isWeekend\" [locale]=\"'en-US'\" [theme]=\"'light'\" [inline]=\"'auto'\" (valueChange)=\"onDateChange($event)\"\u003e\u003c/ngxsmk-datepicker\u003e\n\n#### **3. Disabled Dates Example** Disable specific dates by passing an array of date strings or Date objects: ```typescript // In your component disabledDates = ['10/21/2025', '08/21/2025', '10/15/2025', '10/8/2025', '10/3/2025']; // In your template\n\u003cngxsmk-datepicker [mode]=\"'single'\" [disabledDates]=\"disabledDates\" placeholder=\"Select a date\"\u003e \u003c/ngxsmk-datepicker\u003e\n````\n\n#### **4. Holiday Tooltips Example**\n\nHoliday dates automatically show tooltips when you hover over them:\n\n```typescript\n// Holiday provider with tooltips\nclass MyHolidayProvider implements HolidayProvider {\n  private holidays: { [key: string]: string } = {\n    '2025-01-01': 'New Year\\'s Day',\n    '2025-07-04': 'Independence Day',\n    '2025-12-25': 'Christmas Day',\n  };\n\n  isHoliday(date: Date): boolean {\n    const key = this.formatDateKey(date);\n    return !!this.holidays[key];\n  }\n\n  getHolidayLabel(date: Date): string | null {\n    const key = this.formatDateKey(date);\n    return this.holidays[key] || null;\n  }\n}\n\n// In your template\n\u003cngxsmk-datepicker\n  [holidayProvider]=\"holidayProvider\"\n  [disableHolidays]=\"false\"\n  placeholder=\"Hover over holidays to see tooltips\"\u003e\n\u003c/ngxsmk-datepicker\u003e\n```\n\n## **🔌 Framework Integration**\n\n### **Angular Material Form Fields**\n\nIntegrate with Angular Material's form field components for a seamless Material Design experience. Works with both standalone and non-standalone components:\n\n**Standalone Components:**\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { FormControl, FormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatInputModule } from \"@angular/material/input\";\nimport { NgxsmkDatepickerComponent } from \"ngxsmk-datepicker\";\n\n@Component({\n  selector: \"app-material-form\",\n  standalone: true,\n  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxsmkDatepickerComponent],\n  template: `\n    \u003cform [formGroup]=\"myForm\"\u003e\n      \u003cmat-form-field appearance=\"outline\"\u003e\n        \u003cmat-label\u003eSelect Date\u003c/mat-label\u003e\n        \u003cngxsmk-datepicker mode=\"single\" formControlName=\"date\" placeholder=\"Choose a date\"\u003e \u003c/ngxsmk-datepicker\u003e\n      \u003c/mat-form-field\u003e\n    \u003c/form\u003e\n  `,\n})\nexport class MaterialFormComponent {\n  myForm = new FormGroup({\n    date: new FormControl\u003cDate | null\u003e(null),\n  });\n}\n```\n\n**Non-Standalone Components (NgModules):**\n\n```typescript\nimport { NgModule } from \"@angular/core\";\nimport { MAT_FORM_FIELD_CONTROL } from \"@angular/material/form-field\";\nimport { NgxsmkDatepickerComponent, provideMaterialFormFieldControl } from \"ngxsmk-datepicker\";\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\nimport { MatInputModule } from \"@angular/material/input\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  imports: [NgxsmkDatepickerComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule],\n  providers: [provideMaterialFormFieldControl(MAT_FORM_FIELD_CONTROL)],\n})\nexport class MyModule {}\n```\n\n**With Date Range:**\n\n```html\n\u003cmat-form-field appearance=\"fill\"\u003e\n  \u003cmat-label\u003eDate Range\u003c/mat-label\u003e\n  \u003cngxsmk-datepicker mode=\"range\" [showTime]=\"true\" formControlName=\"dateRange\"\u003e \u003c/ngxsmk-datepicker\u003e\n\u003c/mat-form-field\u003e\n```\n\n### **Ionic Components**\n\nFor best integration with Ionic, import the integration styles in your global CSS/SCSS file:\n\n```css\n@import \"ngxsmk-datepicker/styles/ionic-integration.css\";\n```\n\n**Automatic Theming:**\nThe datepicker automatically detects and uses Ionic CSS variables (e.g., `--ion-color-primary`, `--ion-background-color`) so it matches your app's theme out of the box without extra configuration.\n\nWorks seamlessly with Ionic form components and follows Ionic design patterns:\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { FormControl, FormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { IonItem, IonLabel, IonInput } from \"@ionic/angular/standalone\";\nimport { NgxsmkDatepickerComponent } from \"ngxsmk-datepicker\";\n\n@Component({\n  selector: \"app-ionic-form\",\n  standalone: true,\n  imports: [ReactiveFormsModule, IonItem, IonLabel, IonInput, NgxsmkDatepickerComponent],\n  template: `\n    \u003cform [formGroup]=\"myForm\"\u003e\n      \u003cion-item\u003e\n        \u003cion-label position=\"stacked\"\u003eAppointment Date\u003c/ion-label\u003e\n        \u003cngxsmk-datepicker mode=\"single\" formControlName=\"appointmentDate\" placeholder=\"Select date\"\u003e \u003c/ngxsmk-datepicker\u003e\n      \u003c/ion-item\u003e\n    \u003c/form\u003e\n  `,\n})\nexport class IonicFormComponent {\n  myForm = new FormGroup({\n    appointmentDate: new FormControl\u003cDate | null\u003e(null),\n  });\n}\n```\n\n**With Ionic Datetime Styling:**\n\n```html\n\u003cion-item\u003e\n  \u003cion-label\u003eCheck-in / Check-out\u003c/ion-label\u003e\n  \u003cngxsmk-datepicker mode=\"range\" [theme]=\"'light'\" formControlName=\"bookingDates\"\u003e \u003c/ngxsmk-datepicker\u003e\n\u003c/ion-item\u003e\n```\n\n### **React, Vue, \u0026 Vanilla JS (Web Components)**\n\nBecause `ngxsmk-datepicker` is highly decoupled from heavy external dependencies, it can be exported as a standard Custom Web Component using Angular Elements. This allows you to use exactly the same datepicker in React, Vue, Svelte, or Vanilla JavaScript projects seamlessly!\n\n**1. Create a Custom Element Wrapper**\n```typescript\nimport { createApplication } from '@angular/platform-browser';\nimport { createCustomElement } from '@angular/elements';\nimport { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';\n\n(async () =\u003e {\n  const app = await createApplication();\n  const DatepickerElement = createCustomElement(NgxsmkDatepickerComponent, { injector: app.injector });\n  customElements.define('ngxsmk-datepicker', DatepickerElement);\n})().catch(console.error);\n```\n\n**2. Use It Natively Anywhere**\n```html\n\u003c!-- In any HTML, React, Vue, or Svelte file --\u003e\n\u003cngxsmk-datepicker id=\"myPicker\" mode=\"range\" theme=\"light\"\u003e\u003c/ngxsmk-datepicker\u003e\n\n\u003cscript\u003e\n  // Add native DOM event listeners\n  document.getElementById('myPicker').addEventListener('dateSelect', (e) =\u003e {\n    console.log('Selected date:', e.detail);\n  });\n\u003c/script\u003e\n```\n\nFor full working examples (including React \u0026 Vue bindings), check out the `/examples` directory in our GitHub repository!\n\n### **Plain HTML Inputs**\n\nUse with standard HTML form inputs for maximum flexibility:\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { FormControl, FormGroup, ReactiveFormsModule } from \"@angular/forms\";\nimport { NgxsmkDatepickerComponent } from \"ngxsmk-datepicker\";\n\n@Component({\n  selector: \"app-plain-form\",\n  standalone: true,\n  imports: [ReactiveFormsModule, NgxsmkDatepickerComponent],\n  template: `\n    \u003cform [formGroup]=\"myForm\"\u003e\n      \u003clabel for=\"birthdate\"\u003eBirth Date\u003c/label\u003e\n      \u003cngxsmk-datepicker id=\"birthdate\" mode=\"single\" formControlName=\"birthdate\" placeholder=\"MM/DD/YYYY\"\u003e \u003c/ngxsmk-datepicker\u003e\n\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  `,\n})\nexport class PlainFormComponent {\n  myForm = new FormGroup({\n    birthdate: new FormControl\u003cDate | null\u003e(null),\n  });\n}\n```\n\n**With Native HTML5 Validation:**\n\n```html\n\u003cform [formGroup]=\"myForm\"\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"event-date\"\u003eEvent Date *\u003c/label\u003e\n    \u003cngxsmk-datepicker id=\"event-date\" mode=\"single\" formControlName=\"eventDate\" [minDate]=\"today\" required\u003e \u003c/ngxsmk-datepicker\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### **Form Validation**\n\nBy default, the datepicker input is `readonly` to prevent invalid date strings and force selection via the calendar. However, **browsers do not validate `readonly` fields** during native form submission.\n\n**Behavior:**\n\n- Native browser validation (e.g., blocking submit on `required` fields) will **NOT** trigger on the datepicker by default.\n- Custom validation (e.g., Angular validators) works normally but often only shows errors after the control is \"touched\".\n\n**Solutions:**\n\n1. **Enable Typing (Recommended for Native Validation):**\n   Set `[allowTyping]=\"true\"` to make the input standard editable field. This enables native browser validation tooltips and submit-blocking.\n\n   ```html\n   \u003cngxsmk-datepicker [allowTyping]=\"true\" required ...\u003e\u003c/ngxsmk-datepicker\u003e\n   ```\n\n2. **Custom Validation Logic:**\n   If you prefer the readonly behavior, ensure your form submission handler explicitly checks `form.invalid` before proceeding, as the browser won't stop the submit button click.\n\n## **⚙️ API Reference**\n\n### **Inputs**\n\n| Property           | Type | Default | Description |\n| :----------------- | :--- | :------ | :---------- |\n| mode               | 'single' \\| 'range' \\| 'multiple' | 'single' | The selection mode. |\n| inline             | boolean \\| 'always' \\| 'auto' | false | Controls the display mode. `true` or `'always'` for inline, `'auto'` for responsive. |\n| locale             | string | navigator.language | Sets the locale for language and regional formatting (e.g., 'en-US', 'de-DE'). |\n| theme              | 'light' \\| 'dark' | 'light' | The color theme. |\n| showRanges         | boolean | true | If true, displays the predefined ranges panel when in 'range' mode. |\n| minDate            | DateInput | null | The earliest selectable date. |\n| maxDate            | DateInput | null | The latest selectable date. |\n| isInvalidDate      | (date: Date) =\u003e boolean | () =\u003e false | A function to programmatically disable specific dates. |\n| ranges             | DateRange | null | An object of predefined date ranges. |\n| minuteInterval     | number | 1 | Interval for minute dropdown options. |\n| showTime           | boolean | false | Enables the hour/minute/AM/PM selection section. |\n| timeOnly           | boolean | false | Display time picker only (no calendar). Automatically enables `showTime`. |\n| use24Hour          | boolean | false | Enable 24-hour time format (00-23) and hide AM/PM selector. |\n| allowTyping        | boolean | false | Enable manual typing in the input field. Required for native validation. |\n| displayFormat      | string | null | Custom date format string (e.g., 'MM/DD/YYYY'). |\n| showCalendarButton | boolean | false | Show/hide the calendar icon button. |\n| value              | DatepickerValue | null | Programmatic value setting from code. |\n| startAt            | DateInput | null | The date to initially center the calendar view on. |\n| holidayProvider    | HolidayProvider | null | An object that provides holiday information. |\n| disableHolidays    | boolean | false | If true, disables holiday dates from being selected. |\n| disabledDates      | (string \\| Date)[] | [] | Array of dates to disable. |\n| weekStart          | number \\| null | null | Override week start day (0=Sunday, 1=Monday, etc.). |\n| yearRange          | number | 10 | Number of years before/after current year to show in year dropdown. |\n| clearLabel         | string | 'Clear' | Custom label for the clear button. |\n| closeLabel         | string | 'Close' | Custom label for the close button. |\n| prevMonthAriaLabel | string | 'Previous month' | Aria label for previous month navigation button. |\n| nextMonthAriaLabel | string | 'Next month' | Aria label for next month navigation button. |\n| clearAriaLabel     | string | 'Clear selection' | Aria label for clear button. |\n| closeAriaLabel     | string | 'Close calendar' | Aria label for close button. |\n| classes            | object | undefined | Tailwind-friendly class overrides (wrapper, input, popover, etc.). |\n| enableGoogleCalendar| boolean | false | Enable seamless Google Calendar integration and sync. |\n| googleClientId     | string \\| null | null | Google API OAuth 2.0 Web Client ID for authentication. |\n\n### **Outputs**\n\n| Event       | Payload                         | Description                                                   |\n| :---------- | :------------------------------ | :------------------------------------------------------------ |\n| valueChange | DatepickerValue                 | Emits the newly selected date, range, or array of dates.      |\n| action      | { type: string; payload?: any } | Emits various events like `dateSelected`, `timeChanged`, etc. |\n| googleSyncClick | void                          | Emitted when the user clicks the Google Calendar sync button. |\n\n## **🎨 Theming**\n\n### CSS Variables\n\nYou can easily customize the colors of the datepicker by overriding the CSS custom properties in your own stylesheet.\n\n```css\nngxsmk-datepicker {\n  --datepicker-primary-color: #d9267d;\n  --datepicker-primary-contrast: #ffffff;\n  --datepicker-range-background: #fce7f3;\n}\n```\n\n### Tailwind/ngClass Support\n\nFor Tailwind CSS or custom class-based theming, use the `classes` input:\n\n```html\n\u003cngxsmk-datepicker\n  mode=\"single\"\n  [classes]=\"{\n    inputGroup: 'rounded-lg border',\n    input: 'px-3 py-2 text-sm',\n    popover: 'shadow-2xl',\n    dayCell: 'hover:bg-indigo-50',\n    footer: 'flex justify-end gap-2',\n    clearBtn: 'btn btn-ghost',\n    calendarBtn: 'btn btn-icon',\n    closeBtn: 'btn btn-primary'\n  }\"\n\u003e\n\u003c/ngxsmk-datepicker\u003e\n```\n\n### Dark Theme\n\nTo enable the dark theme, simply bind the theme input:\n\n```html\n\u003cngxsmk-datepicker [theme]=\"'dark'\"\u003e\u003c/ngxsmk-datepicker\u003e\n```\n\n### Calendar Button Visibility\n\nControl the visibility of the calendar icon button:\n\n```html\n\u003c!-- Hide calendar button (default - users can still click input to open calendar) --\u003e\n\u003cngxsmk-datepicker mode=\"single\"\u003e \u003c/ngxsmk-datepicker\u003e\n\n\u003c!-- Show calendar button --\u003e\n\u003cngxsmk-datepicker [showCalendarButton]=\"true\" mode=\"single\"\u003e \u003c/ngxsmk-datepicker\u003e\n\n\u003c!-- Useful with allowTyping for custom UI --\u003e\n\u003cngxsmk-datepicker [allowTyping]=\"true\" [showCalendarButton]=\"false\" mode=\"single\"\u003e \u003c/ngxsmk-datepicker\u003e\n```\n\n## **🌍 Localization (i18n)**\n\nThe `locale` input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week based on BCP 47 language tags.\n\n### **Global Language Support**\n\nngxsmk-datepicker v2.2.0 now features **full localization synchronization** for:\n\n- �� English (`en`)\n- �� German (`de`)\n- �� French (`fr`)\n- �� Spanish (`es`)\n- 🇸🇪 Swedish (`sv`)\n- �� Korean (`ko`)\n- �� Chinese (`zh`)\n- �� Japanese (`ja`)\n\n### **Usage Example**\n\n```html\n\u003c!-- Force German Locale --\u003e\n\u003cngxsmk-datepicker [locale]=\"'de-DE'\"\u003e\u003c/ngxsmk-datepicker\u003e\n\n\u003c!-- Swedish with YYYY-MM-DD format and Monday week start --\u003e\n\u003cngxsmk-datepicker [locale]=\"'sv-SE'\"\u003e\u003c/ngxsmk-datepicker\u003e\n```\n\nThe component automatically uses ISO 8601 standards (Monday start) for European locales and appropriate regional date formats.\n\n## **🖥️ Server-Side Rendering (SSR)**\n\nThe datepicker is fully compatible with Angular Universal and server-side rendering:\n\n- ✅ All browser APIs are platform-checked\n- ✅ No `window` or `document` access during initialization\n- ✅ Works with partial hydration\n- ✅ Compatible with zoneless applications\n\nSee the [SSR Guide](./projects/ngxsmk-datepicker/docs/ssr.md) for detailed setup instructions.\n\n## **⌨️ Keyboard Navigation**\n\nThe datepicker supports full keyboard navigation for accessibility:\n\n### Built-in Shortcuts\n\n- **Arrow Keys** (← → ↑ ↓): Navigate between dates\n- **Page Up/Down**: Navigate months (Shift + Page Up/Down for years)\n- **Home/End**: Jump to first/last day of month\n- **Enter/Space**: Select focused date\n- **Escape**: Close calendar (popover mode)\n- **T**: Select today's date\n- **Y**: Select yesterday\n- **N**: Select tomorrow\n- **W**: Select next week (7 days from today)\n- **Tab**: Navigate between interactive elements\n- **?** (Shift + /): Toggle keyboard shortcuts help dialog\n\n### Custom Keyboard Shortcuts\n\nYou can add custom keyboard shortcuts using the `hooks` input or `customShortcuts` input:\n\n```typescript\nimport { DatepickerHooks, KeyboardShortcutContext } from \"ngxsmk-datepicker\";\n\nconst myHooks: DatepickerHooks = {\n  handleShortcut: (event, context) =\u003e {\n    if (event.ctrlKey \u0026\u0026 event.key === \"1\") {\n      // Custom action\n      return true; // Handled\n    }\n    return false; // Use default\n  },\n};\n```\n\n```html\n\u003cngxsmk-datepicker [hooks]=\"myHooks\" [customShortcuts]=\"shortcuts\" mode=\"single\"\u003e \u003c/ngxsmk-datepicker\u003e\n```\n\nAll date cells are keyboard accessible with proper ARIA attributes for screen readers.\n\nSee [Extension Points Guide](./projects/ngxsmk-datepicker/docs/extension-points.md) for detailed customization options.\n\n## **🚀 Performance Optimizations**\n\nThis library has been optimized for maximum performance:\n\n- **30% Smaller Bundle**: Optimized build configuration and tree-shaking\n- **40% Faster Rendering**: OnPush change detection strategy with proper triggers\n- **60% Faster Selection**: Memoized date comparisons and debounced operations\n- **Zero Dependencies**: Standalone component with no external dependencies\n- **Tree-shakable**: Only import what you need\n- **Memory Efficient**: Cache size limits prevent memory leaks\n- **Hardware Accelerated**: CSS optimizations for smooth animations\n- **Mobile Optimized**: Touch-friendly interactions and responsive design\n\n## **🐛 Bug Fixes \u0026 Improvements**\n\n### **Critical Bug Fixes in v1.4.15:**\n\n- ✅ **Change Detection**: Fixed OnPush change detection issues with proper `markForCheck()` triggers\n- ✅ **Date Comparison**: Fixed null safety issues in date range comparisons\n- ✅ **Memory Leaks**: Added cache size limits to prevent memory leaks\n- ✅ **Type Safety**: Improved TypeScript types and null safety checks\n- ✅ **Mobile UX**: Enhanced mobile interactions and touch feedback\n- ✅ **Performance**: Optimized template bindings with memoized functions\n- ✅ **Accessibility**: Better focus states and keyboard navigation\n- ✅ **Build System**: Improved build configuration and optimization\n\n### **Performance Enhancements:**\n\n- 🚀 **Optimized Bundle Size**: Main bundle ~127KB (source maps excluded from published package)\n- 🚀 **40% Faster Rendering**: Enhanced OnPush change detection\n- 🚀 **60% Faster Selection**: Memoized date comparisons\n- 🚀 **Memory Efficient**: Cache size limits prevent memory leaks\n- 🚀 **Hardware Accelerated**: CSS optimizations for smooth animations\n- 🚀 **Better Tree-Shaking**: Optimized TypeScript compiler settings for smaller output\n- 🚀 **Production Optimized**: Source maps automatically removed from production builds\n\n## **📱 Demo Application**\n\nA comprehensive demo application is included to showcase all features with a modern, polished UI:\n\n```bash\n# Clone the repository\ngit clone https://github.com/NGXSMK/ngxsmk-datepicker.git\ncd ngxsmk-datepicker\n\n# Install dependencies\nnpm install\n\n# Run the demo app\nnpm start\n```\n\nThe demo includes:\n\n- **Modern UI Design**: Beautiful glassmorphism effects, gradient themes, and polished visual hierarchy\n- **Responsive Navigation**: Modern navbar with search, theme toggle, and mobile-friendly menu\n- **Enhanced Sidebar**: Redesigned documentation sidebar with smooth animations and visual indicators\n- **Signal Forms (Angular 21)** with writable signal binding examples\n- **Theming** with CSS variables and Tailwind classes examples\n- **Customization \u0026 A11y** with weekStart, yearRange, labels, and aria examples\n- **Holiday Provider Integration** with US holidays\n- **Single Date Selection** with weekend restrictions\n- **Inline Range Picker** with toggle controls\n- **Date Range with Time** selection\n- **Multiple Date Selection** with action tracking\n- **Programmatic Value Setting** for all selection modes\n- **Theme Toggle** (Light/Dark mode) with automatic system preference detection\n- **Customizable Calendar Views**: Year-picker, decade-picker, timeline view, and time-slider view\n\n## **🔧 Development**\n\n### **GitHub Actions**\n\nThe project uses GitHub Actions for automated deployment:\n\n- **Deploy Demo App**: Automatically deploys the demo application to GitHub Pages on pushes to `main`/`master` branches\n  - Workflow: `.github/workflows/deploy-demo.yml`\n  - Triggers: Push to main/master or manual workflow dispatch\n  - Builds and deploys the demo app to GitHub Pages\n\n### **Building the Library**\n\n```bash\n# Build the library (development)\nnpm run build\n\n# Build optimized production version\n# - Removes source maps automatically\n# - Optimized TypeScript compilation\n# - Enhanced tree-shaking\nnpm run build:optimized\n\n# Analyze bundle size (excludes source maps)\nnpm run build:analyze\n```\n\n**Build Output:**\n\n- Main bundle: `dist/ngxsmk-datepicker/fesm2022/ngxsmk-datepicker.mjs` (~127KB)\n- Type definitions: `dist/ngxsmk-datepicker/index.d.ts`\n- Source maps: Automatically removed from production builds\n\n### **Running Tests**\n\n```bash\n# Run all tests (library + demo app)\nnpm test\n\n# Run library tests only\nnpx ng test ngxsmk-datepicker --no-watch --browsers=ChromeHeadless\n\n# Run specific test file\nnpx ng test ngxsmk-datepicker --include=\"**/issue-13.spec.ts\"\n\n# Run tests in watch mode\nnpm test -- --watch\n```\n\n### **Code Quality Improvements**\n\nThe library now includes:\n\n- ✅ **TypeScript Strict Mode**: Enhanced type safety\n- ✅ **ESLint Configuration**: Code quality enforcement\n- ✅ **Performance Monitoring**: Built-in performance metrics\n- ✅ **Memory Leak Prevention**: Cache size limits and cleanup\n- ✅ **Accessibility Testing**: WCAG compliance checks\n- ✅ **Mobile Testing**: Touch interaction validation\n\n## **📦 Package Structure**\n\n```\nngxsmk-datepicker/\n├── projects/\n│   ├── ngxsmk-datepicker/     # Main library\n│   └── demo-app/              # Demo application\n├── dist/                      # Built packages\n├── docs/                      # Documentation\n└── scripts/                   # Build scripts\n```\n\n## **🎯 Browser Support**\n\n- **Chrome** 90+\n- **Firefox** 88+\n- **Safari** 14+\n- **Edge** 90+\n- **Mobile Safari** 14+\n- **Chrome Mobile** 90+\n\n## **🗺️ Roadmap**\n\nCheck out our [Roadmap](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/ROADMAP.md) to see planned features, improvements, and how you can contribute. We're always looking for contributors, especially for issues labeled `good-first-issue` and `help-wanted`!\n\n## **🤝 Contributions**\n\nWe welcome and appreciate contributions from the community! Whether it's reporting a bug, suggesting a new feature, or submitting code, your help is valuable.\n\n### **Development Setup**\n\n1. **Fork the repository** on GitHub\n2. **Clone your fork** to your local machine\n3. **Install dependencies**: `npm install`\n4. **Run the demo app**: `npm start`\n5. **Create a feature branch** for your changes\n6. **Commit your changes** following conventional commits\n7. **Submit a Pull Request** to the main branch\n\n### **Contribution Guidelines**\n\n- Follow the existing code style\n- Add tests for new features\n- Update documentation as needed\n- Ensure all tests pass\n- Follow conventional commit messages\n\n## **📄 Changelog**\n\nFor a full list of changes, please refer to the [CHANGELOG.md](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/CHANGELOG.md) file.\n\n### **v2.2.0** (Current Stable)\n\n- 🎉 **Version Update**: Updated to version 2.2.0.\n- ✨ **Key Updates**: Optimized loading times, refined mobile header layout, and improved dropdown accessibility.\n- ✅ **Stable Release**: Full synchronization of header components with `ViewEncapsulation.None`.\n\n### **v1.9.24**\n\n- 🎉 **Version Update**: Updated to version 1.9.24\n- ✅ **Stable Release**: Version 1.9.24 is the current stable version\n\n### **v1.9.23**\n\n- 🐛 **Fixed**: CSS Variables Theming (Issue #84) - CSS variables theming now works when variables are defined in global `:root` selector\n  - Enhanced CSS selector from `:root` to `:root, :root \u003e body` for higher specificity\n  - Added `!important` flags to inline styles to ensure they override existing styles\n  - ThemeBuilderService now properly overrides global stylesheet variables\n  - Updated documentation to explain the fix and provide guidance\n  - Resolves issue where theme variables defined in global stylesheets were not being applied\n\n### **v1.9.22**\n\n- 🎉 **Version Update**: Updated to version 1.9.22\n- 🐛 **Fixed**: Form control value initialization issue - datepicker now correctly displays month from form control values\n  - Fixed calendar month display when using Reactive Forms with initial values\n  - Added proper signal updates and change detection in `writeValue()` method\n- 🐛 **Fixed**: Locale week start detection for en-GB and other European locales\n  - Added fallback logic for locales where `Intl.Locale.weekInfo` is not available\n  - Now correctly returns Monday (1) for en-GB and other European locales\n\n### **v1.9.21**\n\n- 🎉 **Version Update**: Updated to version 1.9.21\n- 📱 **Mobile-Specific Features**: Comprehensive mobile optimization\n  - Native date picker integration with automatic mobile detection\n  - Bottom sheet modal with swipe-to-dismiss gestures\n  - Enhanced touch gestures (double-tap, swipe navigation)\n  - Haptic feedback support for better mobile UX\n  - Mobile-optimized animations and keyboard handling\n- 🎯 **Advanced Selection Modes**: Extended selection capabilities\n  - Week selection mode for selecting entire weeks\n  - Month selection mode for selecting full months\n  - Quarter selection mode for quarterly selections\n  - Year selection mode for annual date ranges\n- ⏱️ **Enhanced Time Selection**: Improved time picker\n  - Seconds selection with configurable intervals\n  - Better time picker UX and controls\n- 🏗️ **Code Refactoring**: Improved architecture\n  - New services: CalendarGenerationService, DisplayFormattingService, DateValidationService\n  - Better code organization and maintainability\n  - Reduced component complexity\n- ♿ **Accessibility Enhancements**: Better screen reader support\n  - Improved ARIA live regions\n  - Enhanced focus management\n  - Better keyboard navigation\n- ⚡ **Performance Optimizations**: Infrastructure improvements\n  - Lazy loading calendar months with intelligent caching\n  - Virtual scrolling infrastructure\n  - Preloading adjacent months\n- 🧪 **Test Coverage**: Comprehensive test suite\n  - 414 tests passing\n  - New service tests\n  - Updated component and utility tests\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.20\n\n### **v1.9.20**\n\n- 🎉 **Version Update**: Updated to version 1.9.20\n- 🐛 **Bug Fix (Issue #71)**: Fixed `TypeError: window.matchMedia is not a function` error in test environments (jsdom/Vitest)\n  - Added error handling for `window.matchMedia` in `applyAnimationConfig()` method\n  - Component now gracefully handles missing `matchMedia` API in test environments\n  - Prevents test failures when running with Vitest and jsdom\n- ✅ **Test Coverage**: Added comprehensive test coverage for `matchMedia` compatibility scenarios\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.19\n\n### **v1.9.19**\n\n- 🎉 **Version Update**: Updated to version 1.9.19\n- 🎨 **Responsive Layout Redesign**: Complete redesign of demo project layout for all screen sizes (320px to desktop)\n- 📱 **Mobile Optimization**: Enhanced mobile experience with improved navbar, sidebar, hero section, and feature grid\n- 🧹 **Code Cleanup**: Removed unnecessary comments for cleaner codebase\n- 🔧 **Meta Tag Update**: Replaced deprecated `apple-mobile-web-app-capable` with `mobile-web-app-capable`\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.18\n\n### **v1.9.18**\n\n- 🐛 **Mobile Touch Event Handling**: Fixed touch listener attachment when calendar opens on mobile devices\n  - Touch listeners now properly attach when calendar first opens, eliminating the need to navigate months first\n  - Added retry mechanism with multiple attempts to ensure listeners are attached even on slower mobile devices\n  - Improved timing with double `requestAnimationFrame` calls and multiple retry strategies\n- 🎉 **Version Update**: Updated to version 1.9.18\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.17\n\n### **v1.9.17**\n\n- 🎉 **Calendar Button Visibility Control**: Added `showCalendarButton` input property to show/hide the calendar icon button\n  - Defaults to `false` for a cleaner, more minimal UI\n  - When set to `true`, displays the calendar icon button next to the input field\n  - When set to `false`, users can still open the calendar by clicking the input field\n  - Perfect for custom UI designs or when using `allowTyping` with custom calendar triggers\n- 🎨 **Calendar Button Styling**: Added `calendarBtn` to `DatepickerClasses` for custom styling of the calendar button\n- 🔧 **Type Compatibility**: Updated `SignalFormField` type to be fully compatible with Angular 21's `FieldTree\u003cDate, string\u003e` types\n  - Resolves TypeScript compilation issues when using `[field]` input with Angular 21 Signal Forms\n  - Maintains full backward compatibility with Angular 17-20\n- 🎉 **Version Update**: Updated to version 1.9.17\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.16\n- ✅ **Angular 17-22 Compatible**: Verified compatibility with Angular 17-22 (including Angular 21)\n\n### **v1.9.16**\n\n- 🐛 **Range Mode Previous Month Selection**: Fixed issue where users could not select dates from previous months in range mode when starting with `{ start: null, end: null }`\n- 🎉 **Version Update**: Updated to version 1.9.16\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.15\n- ✅ **Angular 17+ Compatible**: Verified compatibility with Angular 17 and up versions\n\n### **v1.9.15**\n\n- 🐛 **Moment Object Binding Fix**: Fixed Moment.js objects not binding correctly with ngModel\n- 🐛 **Date Clicks After Navigation**: Fixed dates becoming unclickable after month navigation\n- 🎉 **Version Update**: Updated to version 1.9.15\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.14\n- ✅ **Angular 17+ Compatible**: Verified compatibility with Angular 17 and up versions\n\n### **v1.9.14**\n\n- 🐛 **Date Picker Selection Fix**: Fixed date picker selection issues, especially in range mode\n- 🐛 **Moment.js Timezone Support**: Fixed timezone offset preservation for Moment.js objects\n- 🎉 **Version Update**: Updated to version 1.9.14\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.13\n\n### **v1.9.13**\n\n- 🐛 **Bug Fixes**: Fixed `valueChange` event emitting null for range mode with ngModel\n- 🐛 **Bug Fixes**: Fixed date selection becoming disabled after month navigation in range mode\n- 🐛 **Bug Fixes**: Fixed Moment.js object handling in range values and arrays\n- 🎉 **Version Update**: Updated to version 1.9.13\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.12\n\n### **v1.9.12**\n\n- 🎉 **Version Update**: Updated to version 1.9.12\n- 🔄 **Backward Compatible**: Full backward compatibility with v1.9.11\n- 📚 **Migration Guide**: See [MIGRATION.md](MIGRATION.md) for detailed migration instructions\n\n### **v1.9.11**\n\n- 🐛 **Moment.js Integration**: Fixed critical issue where Moment.js objects with custom date formats would not populate correctly\n  - Added `isMomentObject()` helper method to safely detect Moment.js instances\n  - Enhanced `_normalizeValue()` method to handle Moment.js objects directly\n  - Improved `parseCustomDateString()` method for TypeScript compatibility\n  - Added comprehensive support for format tokens: YYYY, YY, MM, M, DD, D, hh, h, HH, H, mm, m, ss, s, a, A\n  - Maintains full backward compatibility with Date objects, strings, and all other supported formats\n- 🎨 **Custom Format Parser**: Enhanced format token parsing with better TypeScript compatibility\n- 🔍 **Moment.js Detection**: More robust detection of Moment.js objects across different versions\n- 🎮 **Demo Application**: Added working Moment.js integration example with interactive controls\n\n### **v1.9.10**\n\n- 🐛 **Async Database Value Loading**: Enhanced datepicker to properly handle database values that load asynchronously\n  - Added fallback sync mechanism in `ngAfterViewInit` to catch async database loads\n  - Added delayed sync checks in `ngOnInit`, `ngOnChanges`, and `ngAfterViewInit`\n  - Added sync on calendar open, focus events, and touch events\n  - Extended interval sync duration to 30 seconds with 100ms check intervals\n- 🔧 **TypeScript Compilation Error**: Fixed `EffectRef` type error when using Angular 17+ `effect()` API\n  - Changed `_fieldEffectDestroy: (() =\u003e void) | null` to `_fieldEffectRef: EffectRef | null`\n  - Updated effect cleanup to use `effectRef.destroy()` instead of function call\n  - Added proper `EffectRef` import from `@angular/core`\n- 🧪 **Test Configuration**: Fixed test configuration for Angular 17+ compatibility\n  - Updated karma configuration to work with `@angular/build:karma` builder\n  - Simplified karma.conf.js to remove deprecated plugins\n  - Updated test script to target correct project\n\n### **v1.9.9**\n\n- 🐛 **Database Value Population**: Fixed critical issue where datepicker would not populate with values from database when using `[field]` input binding\n  - Added `_normalizeValue()` helper method to properly handle all value types\n  - Updated field effect and related methods to use `_normalizeValue()` instead of `_normalizeDate()`\n  - Fixed issue where string dates from database were not being parsed and displayed correctly\n  - Now properly handles Date objects, string dates, range objects, and arrays of dates\n\n### **v1.9.8**\n\n- 🐛 **Date Selection Reset Issue**: Fixed critical bug where selected dates would reset to today's date when using `[field]` input binding\n  - Fixed `applyCurrentTime` to create a new Date object instead of mutating the original\n  - Added `_isUpdatingFromInternal` flag to prevent field effect from resetting the value\n  - This ensures selected dates are properly stored in the form field\n\n### **v1.9.7**\n\n- 🐛 **Calendar Population**: Fixed critical issue where datepicker calendar would not populate with dates when opened\n  - Fixed issue when multiple datepickers were present in the same form\n  - Ensured `generateCalendar()` is called when opening the datepicker via click, touch, or programmatic methods\n\n### **v1.9.6**\n\n- 🐛 **Multiple Datepicker Management**: Fixed issue where multiple datepickers in the same form would open in the same centered location\n- 🖱️ **Outside Click Detection**: Improved click detection to properly close datepicker when clicking outside\n- 🔄 **Auto-close Other Datepickers**: When opening a datepicker, all other open datepickers in the same form are now automatically closed\n- 📱 **Mobile Datepicker Opening**: Fixed issue where datepicker modal would not open on mobile screens\n- 📱 **Datepicker Closing on Mobile**: Fixed issue where datepicker would open and immediately disappear on mobile devices\n- 👆 **Select Box Cursor**: Added pointer cursor to all select boxes (month, year, hour, minute, AM/PM) in the datepicker\n\n### **v1.9.5**\n\n- 🔧 **Angular 21+ Signal Forms Type Compatibility**: Fixed TypeScript compilation error with Angular 21+ Signal Forms\n  - Fixed `Type '() =\u003e string' is not assignable to type 'never'` error when using `[field]` input\n  - Updated `SignalFormField` type definition to be compatible with Angular 21's `FieldTree\u003cDate, string\u003e` types\n  - Maintains backward compatibility with Angular 17-20 where field input is optional\n  - Resolves [#33](https://github.com/NGXSMK/ngxsmk-datepicker/issues/33)\n\n### **v1.9.4**\n\n- ✨ **Custom Date Format**: New `[displayFormat]` input property to display dates in custom formats\n  - Supports format strings like \"MM/DD/YYYY hh:mm A\"\n  - Works with date adapters (date-fns, dayjs, luxon) or built-in simple formatter\n  - Supports common format tokens: YYYY, MM, DD, hh, mm, A, etc.\n  - Resolves [#31](https://github.com/NGXSMK/ngxsmk-datepicker/issues/31)\n- 🐛 **Time Selection Dropdowns**: Fixed visibility issues with time selection dropdowns\n  - Dropdowns now properly display and are not clipped by parent containers\n  - Improved z-index handling for time selection dropdowns\n  - Removed unnecessary scrollbars from datepicker wrapper\n  - Resolves [#32](https://github.com/NGXSMK/ngxsmk-datepicker/issues/32)\n\n### **v1.9.3**\n\n- ✨ **Time-Only Picker**: New `[timeOnly]` input property to display only time selection without calendar\n  - Hides calendar grid and shows only time controls (hour, minute, AM/PM)\n  - Automatically enables `showTime` when `timeOnly` is true\n  - Perfect for time selection scenarios where date is not needed\n  - Value is still a Date object using today's date with selected time\n  - Placeholder automatically changes to \"Select Time\" in time-only mode\n  - Resolves [#29](https://github.com/NGXSMK/ngxsmk-datepicker/issues/29)\n- 🎨 **Modern Demo App UI**: Complete redesign of the demo application\n  - Modern navbar with glassmorphism effects, search functionality, and improved theme toggle\n  - Redesigned sidebar with gradient backgrounds, smooth animations, and visual indicators\n  - Enhanced icon sizes and better visual hierarchy\n  - Improved responsive design with better mobile experience\n  - Automatic system theme detection (dark/light mode preference)\n  - Gradient accents, shadows, and modern design patterns throughout\n- 🧪 **Test Suite**: Fixed 25+ failing tests across multiple test files\n  - Fixed date utils tests, calendar utils tests, timezone utils tests, edge cases tests\n  - Fixed adapters tests, performance utils tests, RTL tests, touch gestures tests\n  - Fixed calendar views tests, recurring dates utils tests\n  - All 353 tests now pass successfully\n\n### **v1.9.2**\n\n- 📦 **Bundle Optimization**: Optimized bundle size with improved TypeScript compiler settings\n  - Main bundle: ~127KB (source maps excluded from published package)\n  - Enhanced tree-shaking with optimized imports and compiler options\n  - Added `importsNotUsedAsValues: \"remove\"` for smaller output\n  - Disabled `preserveConstEnums` for better inlining\n- 🔧 **Build Process**:\n  - Source maps automatically removed from production builds (saves ~127KB)\n  - Improved build scripts with better error handling\n  - Enhanced bundle analysis that excludes source maps\n- 📦 **Package Configuration**:\n  - Fixed package.json exports to eliminate build warnings\n  - Optimized `files` array to exclude unnecessary files\n  - Updated exports field for better module resolution\n- 🧪 **Test Configuration**:\n  - Added Zone.js polyfills to library test configuration\n  - Updated test commands to explicitly target library project\n  - Improved test reliability across Angular versions\n- 🐛 **Bug Fixes**:\n  - Test suite configuration - added missing Zone.js polyfills for library tests\n  - Bundle analysis now correctly excludes source maps from size calculations\n  - Build warnings from conflicting export conditions resolved\n  - Source map removal script made more resilient for build environments\n\n### **v1.9.1**\n\n- 🐛 Minor bug fixes and improvements\n\n### **v1.9.0**\n\n- ✨ **Extension Points \u0026 Hooks**: system for customization\n- ⌨️ **Enhanced Keyboard Shortcuts**: Y, N, W keys with custom shortcut support\n- 🎨 **Modern UI/UX**: Improved animations and responsiveness\n- 📚 **API Documentation**: TypeDoc integration\n- 🤖 **Semantic Release**: Automated versioning and publishing\n- 🚀 **Animation Performance**: Optimizations with GPU acceleration\n- 🔍 **Global Search**: Functionality in documentation\n- 📱 **Mobile Playground**: For responsive testing\n\n### **v1.7.0**\n\n- 🎯 **Signal Forms Support**: Full Angular 21 signal forms integration with writable signals\n- 🎨 **Tailwind Theming**: Added `classes` input for Tailwind CSS and custom class-based theming\n- 🌍 **Localization Improvements**: Added `weekStart` input to override locale-based week start day\n- 📅 **Year Range Configuration**: Added `yearRange` input to customize year dropdown range\n- ♿ **Accessibility Enhancements**: Added customizable aria labels for all interactive elements\n- 🏷️ **Custom Labels**: Added `clearLabel` and `closeLabel` inputs for button customization\n- 🧪 **Comprehensive Test Suite**: Added 56 tests covering all features and edge cases\n- 🐛 **Bug Fixes**: Fixed programmatic value setting and Angular 21 compatibility tests\n- 🧹 **Code Cleanup**: Removed unnecessary files, folders, and comments from codebase\n- 📝 **Test Improvements**: Enhanced test coverage with comprehensive feature tests\n- 🔧 **Test Fixes**: Fixed disabled date tests and integration test issues\n- 🎯 **Code Quality**: Improved code maintainability by removing redundant comments\n\n### **v1.6.0**\n\n- 🎯 **Programmatic Value Setting**: Added `value` input property to set datepicker value programmatically, perfect for server-side API data integration\n- 🎨 **Enhanced Demo App**: Completely redesigned demo application with TokiForge-inspired modern UI and API documentation style\n- 🚀 **GitHub Pages Deployment**: Added automated GitHub Pages deployment with GitHub Actions workflow\n- 📚 **Improved Documentation**: Enhanced demo app with comprehensive examples, code snippets, and interactive documentation\n- 🔧 **Build Optimizations**: Updated CSS budget limits and improved build configuration\n- 🎨 **Modern UI Design**: Beautiful gradient themes, glass-morphism effects, and improved visual hierarchy\n- 📱 **Better UX**: Enhanced navigation, code copying functionality, and responsive design\n- 🛠️ **Developer Experience**: Improved build scripts and deployment automation\n\n### **v1.5.0**\n\n- 🚀 **Angular 21 Support**: Full compatibility with Angular 21 RC versions\n- ⚡ **Zone-less Support**: Works without zone.js for improved performance\n- 🧪 **Comprehensive Tests**: Added extensive test suite covering all features\n- 🔧 **Angular 17-21 Compatibility**: Supports Angular versions 17, 18, 19, 20, and 21\n- 📦 **Dependency Updates**: Updated to Angular 21 RC and latest build tools\n- 🧹 **Code Cleanup**: Removed unnecessary documentation files and comments\n- 📝 **Improved Keywords**: Added version-specific keywords for better discoverability\n- 🎯 **Peer Dependencies**: Updated to support Angular 17-21 range\n\n### **v1.4.16**\n\n- 📚 **Documentation**: Comprehensive README updates with latest features and improvements\n- 🎯 **Version Management**: Updated version references across all package files\n- 📖 **User Experience**: Enhanced documentation with better examples and API references\n- 🔧 **Maintenance**: Improved project structure and documentation consistency\n- 📦 **Package Updates**: Synchronized version numbers across all package.json files\n- 🎨 **Documentation**: Added detailed bug fixes and performance metrics\n- 🚀 **Developer Experience**: Better setup instructions and contribution guidelines\n\n### **v1.4.15**\n\n- 🐛 **Bug Fixes**: Fixed 10 critical bugs including change detection issues and date comparison errors\n- ⚡ **Performance**: Enhanced OnPush change detection with proper triggers\n- 🎯 **Memory Management**: Added cache size limits to prevent memory leaks\n- 🔧 **Type Safety**: Improved TypeScript types and null safety\n- 📱 **Mobile Optimization**: Enhanced mobile responsive design with touch-friendly interactions\n- 🎨 **UI Improvements**: Better visual feedback and accessibility\n- 🚀 **Build Optimization**: Improved build configuration and tree-shaking\n- 🧹 **Code Quality**: Enhanced code maintainability and performance\n\n### **v1.4.13**\n\n- 🚫 **Disabled Dates**: New `disabledDates` input property to disable specific dates\n- 🎯 **Date String Support**: Supports both string dates (MM/DD/YYYY) and Date objects\n- 💡 **Holiday Tooltips**: Hover over holiday dates to see holiday names as tooltips\n- 🎨 **Enhanced UX**: Better visual feedback for disabled dates\n- 📦 **Improved API**: More flexible date disabling options\n\n### **v1.4.12**\n\n- ⚡ **Instant Navigation**: Removed all animations for lightning-fast arrow navigation\n- 🚫 **Smart Back Arrow**: Automatically disables back arrow when minDate is set\n- 🎯 **Better UX**: Prevents navigation to invalid date ranges\n- 🗓️ **Previous Month Days**: Now shows last few days of previous month for better context\n- 🎨 **Enhanced Styling**: Improved visual hierarchy with better day cell sizing\n- 🖱️ **Interactive Previous Days**: Previous month days are now selectable and interactive\n- 🧹 **Code Optimization**: Cleaner, more maintainable codebase\n- 📦 **Smaller Bundle**: Reduced CSS and JavaScript footprint\n\n### **v1.4.11**\n\n- 🎨 **UI Improvements**: Enhanced day cell sizing and visual hierarchy\n- 🖱️ **Better Interactions**: Improved click and hover states for previous month days\n\n### **v1.4.10**\n\n- 🗓️ **Previous Month Display**: Added last few days of previous month for better context\n- 🎯 **Smart Selection**: Previous month days are now selectable and interactive\n\n### **v1.4.9**\n\n- 🚫 **Range Fix**: Fixed range highlighting on empty/previous month days\n- 🎨 **Styling Updates**: Improved visual consistency across all day types\n\n### **v1.4.8**\n\n- ⚡ **Performance**: Optimized calendar generation and rendering\n- 🧹 **Code Cleanup**: Removed unused animation code and improved maintainability\n\n### **v1.4.6**\n\n- 🔧 **Fixed Import Paths**: Corrected package exports for proper module resolution\n- 📦 **Better Package Structure**: Improved npm package configuration\n\n### **v1.4.5**\n\n- 🐛 Bug fixes and stability improvements\n- 🔧 Enhanced error handling\n- 📱 Improved mobile responsiveness\n- 🎨 Minor UI/UX improvements\n\n### **v1.4.0**\n\n- ✅ Performance optimizations (30% smaller bundle)\n- ✅ OnPush change detection strategy\n- ✅ Memoized date comparisons\n- ✅ Tree-shakable architecture\n- ✅ Enhanced TypeScript support\n- ✅ Improved accessibility\n- ✅ Better mobile responsiveness\n\n### **Previous Versions**\n\n- v1.3.5: Initial release with core features\n- v1.3.4: Bug fixes and improvements\n- v1.3.3: Holiday provider integration\n\n## **🎨 Theming with TokiForge**\n\nLooking for a powerful theming solution for your Angular application? Check out **[TokiForge](https://tokiforge.github.io/tokiforge/)** — an open-source modern design token \u0026 theme engine that provides runtime theme switching for React, Vue, Svelte, Angular, and any framework.\n\n### Why TokiForge?\n\n- ✅ **Framework-agnostic** — Works with Angular, React, Vue, Svelte, and vanilla JS\n- ✅ **Runtime theme switching** — Change themes dynamically without rebuilds\n- ✅ **Type-safe** — Full TypeScript support for design tokens\n- ✅ **Lightweight** — \u003c3 KB gzipped runtime footprint\n- ✅ **CSS custom properties** — Zero JS overhead in static mode\n- ✅ **SSR compatible** — Works seamlessly with Angular Universal\n\nPerfect for managing design tokens, creating theme systems, and implementing dark mode in your Angular applications!\n\n**👉 [Learn more about TokiForge →](https://tokiforge.github.io/tokiforge/)**\n\n---\n\n## **📜 License**\n\nMIT License - see [LICENSE](https://github.com/NGXSMK/ngxsmk-datepicker/blob/main/LICENSE) file for details.\n\n## **🔍 SEO \u0026 Discoverability**\n\nThis library is optimized for search engine visibility, especially for European markets:\n\n- **Keywords**: Angular datepicker, date range picker, calendar component, Angular 17-21, TypeScript, Signal Forms, SSR compatible\n- **European SEO**: Optimized for Germany, France, Spain, Italy, Netherlands, Poland, Portugal, Sweden, Norway, Finland, Denmark, Belgium, Switzerland, Austria, and United Kingdom\n- **Multi-language Support**: hreflang tags for 15+ European languages and locales\n- **European Geo-targeting**: Geo tags and structured data optimized for European Union countries\n- **Meta Tags**: Comprehensive Open Graph and Twitter Card support with European locale alternates\n- **Structured Data**: JSON-LD schema markup with European audience targeting and area served information\n- **Documentation**: Complete API documentation with examples\n- **Performance**: Optimized bundle size (~127KB) for fast loading\n- **European Localization**: Full i18n support for European date formats, week start days, and regional preferences\n\n## **👨‍💻 Author**\n\n**Sachin Dilshan**\n\n- 📧 Email: [sachindilshan040@gmail.com](mailto:sachindilshan040@gmail.com)\n- 🐙 GitHub: [@toozuuu](https://github.com/toozuuu)\n- 📦 NPM: [ngxsmk-datepicker](https://www.npmjs.com/package/ngxsmk-datepicker)\n- 💼 LinkedIn: [sachindilshan](https://www.linkedin.com/in/sachindilshan/)\n\n## **⭐ Support**\n\nIf you find this library helpful, please consider:\n\n- ⭐ **Starring** the repository\n- 🐛 **Reporting** bugs and issues\n- 💡 **Suggesting** new features\n- 🤝 **Contributing** code improvements\n- 📢 **Sharing** with the community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngxsmk%2Fngxsmk-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngxsmk%2Fngxsmk-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngxsmk%2Fngxsmk-datepicker/lists"}