ngx-daterangepicker-pro

A powerful, customizable Angular date range picker built with Angular 17+ and Day.js.

---

✨ Features

• 🔥 Clean and modern date range selection
• 📅 Supports predefined and custom ranges
• 🎨 Fully customizable styles
• 🔄 Two-way binding with FormControl and ngModel
• 🧩 Lightweight (uses Day.js)

---

📦 Installation

Install via npm:

npm install ngx-daterangepicker-pro dayjs

---

🚀 Usage

1. Import the Directive

In a Module:

import { NgxDaterangePickerProDirective } from 'ngx-daterangepicker-pro';

@NgModule({
  imports: [NgxDaterangePickerProDirective]
})
export class AppModule {}

Or in a Standalone Component:

import { Component } from '@angular/core';
import { NgxDaterangePickerProDirective } from 'ngx-daterangepicker-pro';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [NgxDaterangePickerProDirective],
  templateUrl: './app.component.html'
})
export class AppComponent {}

---

2. Template Usage with Reactive Forms

<form [formGroup]="form">
  <input type="text" ngxDaterangePickerPro formControlName="range" />
</form>

<p>
  Selected Range:
  {{ form.get('range')?.value?.from | date: 'dd/MM/yyyy' }} -
  {{ form.get('range')?.value?.to | date: 'dd/MM/yyyy' }}
</p>

---

3. Component Code

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { DateRangeModel } from 'ngx-daterangepicker-pro';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  form = new FormGroup({
    range: new FormControl<DateRangeModel>({ from: null, to: null })
  });
}

---

🧪 Development

To run the demo app locally:

npm install
ng serve

Then open http://localhost:4200 in your browser.

---

🛠️ Building the Library

To build the library:

ng build ngx-daterangepicker-pro

The output will be located in the dist/ngx-daterangepicker-pro/ folder.

---

✅ Running Unit Tests

To run unit tests:

ng test

---

📣 Contributing

Contributions are welcome! Found a bug or want to suggest a feature?

1. Fork the repo
2. Create your branch:

   git checkout -b feature/your-feature-name

3. Commit your changes:

   git commit -m 'feat: add new feature'

4. Push to the branch:

   git push origin feature/your-feature-name

5. Open a Pull Request

---

📬 Support

If you encounter any issues or have questions, please open an issue.

---

📝 License

This project is licensed under the MIT License.

---

🙌 Acknowledgments

• Built with Angular
• Date handling via Day.js