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

Description:

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

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

See Also:

• 10 Best Date Picker Libraries For Angular.js App

How to use it:

1. Install and import the ngx-daterange module.

# NPM
$ npm install ngx-daterange --save

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

2. Use the component in your app.

<date-range-picker 
  [options]="options" 
  [parentFormGroup]="form" 
  [controlName]="'myDateRange'">
</date-range-picker>

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    FormsModule,
    NgxDateRangeModule,
    ReactiveFormsModule,
  ],
  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[];

Preview: