Custom Date Range Picker For Angular 8+ – ngx-daterange

Author: alsoicode
Official Page: Go to website
Publish Date: November 6, 2019
License: MIT


A minimal clean and highly customizable date range picker for Angular 8+.

Based on the Moment.js library to manipulate dates & times.

See Also:

How to use it:

1. Install and import the ngx-daterange module.

$ npm install ngx-daterange --save
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxDateRangeModule } from 'ngx-daterange';

2. Use the component in your app.

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

3. All possible options to customize the date range picker.

autoApply?: boolean;
clickOutsideAllowed?: boolean;
displayFormat?: string;
disabled?: boolean;
format: string;
icons?: 'default' | 'material' | 'font-awesome';
labelText?: string;
minDate: momentNs.Moment;
maxDate: momentNs.Moment;
position?: 'left' | 'right';
preDefinedRanges?: IDefinedDateRange[];
singleCalendar?: boolean;
startingFromDate?: momentNs.Moment;
startingToDate?: momentNs.Moment;
validators?: ValidatorFn | ValidatorFn[];


Custom Date Range Picker For Angular 8+ - ngx-daterange

You Might Be Interested In:

Add Comment