Press "Enter" to skip to content

Angular 2+ Ngx Date Range Picker With Customizable Content

Ngx date range is the simple and highly customizable daterange picker for Angular 8+. Based on Moment.js library to control dates and times.

single calendar date range picker, custom date range picker, daterangepicker options, daterangepicker format ddmmyyyy, date range picker two inputs

Persian Date and Time Picker with jQuery and Bootstrap

How to make use of 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[];

Custom Date Range Picker, Ngx Date Range Plugin/Github


See Demo And Download

Official Website(alsoicode): Click Here

This superior jQuery/javascript plugin is developed by alsoicode. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.