ngx-daterangepicker-pro

May 29, 2025 · View on GitHub

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

npm version Angular License: MIT

✨ 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