Angular 6 Date Range Picker Inspired By PayPal’s On Website

Angular DateRangePicker is a date range picker largely inspired by the PayPal data picker as seen on the website.

angular date range picker example, ngx daterangepicker material, angular date range picker npm, date range picker angular 6, mat date range picker

JavaScript Component Datetime Range Picker | daterangepicker

How to make use of it:

Installation:

npm install ngx-daterangepicker --save
or with YARN
yarn add ngx-daterangepicker

Usage

import { NgxDateRangePickerModule } from 'ngx-daterangepicker';
// app.module.ts
@NgModule({
  ...
  imports: [ ..., NgxDateRangePickerModule, ... ],
  ...
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxDateRangePickerOptions } from 'ngx-daterangepicker';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  options: NgxDateRangePickerOptions;
  ngOnInit() {
    this.options = {
            theme: 'default',
            labels: ['Start', 'End'],
            menu: [
                {alias: 'td', text: 'Today', operation: '0d'},
                {alias: 'tm', text: 'This Month', operation: '0m'},
                {alias: 'lm', text: 'Last Month', operation: '-1m'},
                {alias: 'tw', text: 'This Week', operation: '0w'},
                {alias: 'lw', text: 'Last Week', operation: '-1w'},
                {alias: 'ty', text: 'This Year', operation: '0y'},
                {alias: 'ly', text: 'Last Year', operation: '-1y'},
                {alias: 'ny', text: 'Next Year', operation: '+1y'},
                {alias: 'lyt', text: 'Last year from today', operation: '-1yt'},
            ],
            dateFormat: 'YYYY-MM-DD',
            outputFormat: 'DD-MM-YYYY',
            startOfWeek: 0,
            outputType: 'object',
            locale: 'es',
            date: {
                from: {
                    year: 2017,
                    month: 3,
                    day: 5
                },
                to: {
                    year: 2017,
                    month: 3,
                    day: 6
                }
            }
        };
  }
}

<!-- app.component.html -->
<ngx-daterangepicker [(ngModel)]="value" [options]="options"></ngx-daterangepicker>

Configuration

export interface NgxDateRangePickerOptions {
    theme: 'default' | 'green' | 'teal' | 'cyan' | 'grape' | 'red' | 'gray';
    range?: string;
    locale?: string;
    labels: string[];
    menu: NgxMenuItem[];
    dateFormat: string;
    outputFormat: string;
    startOfWeek: number;
    outputType?: 'string' | 'object';
    date?: NgxDateRangePickerDates;
}
export interface NgxDateRangePickerDates {
    from: Date | {
        year: number,
        month: number,
        day: number
    };
    to: Date | {
        year: number,
        month: number,
        day: number,
    };
}

Paypal Inspired Date Range Picker, Angular DateRange Picker Plugin/Github

See Demo And Download

Official Website(GNURub): Click Here

This superior jQuery/javascript plugin is developed by GNURub. For extra Advanced Usages, please go to the official website.