ngx-datetime-range-picker-ng13 v3.0.3

ngx-datetime-range-picker

Ngx Date time range picker with daily, weekly, monthly, quarterly & yearly levels

This plugin uses bootstrap, moment.js and font-awesome.

Demo: https://bhavinpatel04.github.io/ngx-datetime-range-picker/

Installation

Install the plugin from npm:

npm install ngx-datetime-range-picker --save

import NgxDatetimeRangePickerModule in your module:

...
import { FormsModule } from '@angular/forms';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { AppComponent } from "./app.component";

@NgModule({
    imports:      [... , FormsModule, NgxDatetimeRangePickerModule.forRoot()],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
export class AppModule {}

Usage example

Html:

<ngx-datetime-range-picker
  name="date"
  [options]="datePickerOptions"
  [settings]="datePickerSettings"
  [(dateRangeModel)]="selectedDate"
  (dateRangeChanged)="onFilterChange($event)"
  required
>
</ngx-datetime-range-picker>

Typescript:

selectedDate: {
    daily: {
        startDate: "2018-10-13",
        endDate: "2018-10-19",
      },
    weekly: {
        startDate: "2018-10-13",
        endDate: "2018-10-19",
    },
    monthly: {
        startDate: "2018-10-13",
        endDate: "2018-10-19",
    },
    quarterly: {
        startDate: "2018-10-13",
        endDate: "2018-10-19",
    },
    yearly: {
        startDate: "2018-10-13",
        endDate: "2018-10-19",
    }
};

Options

Settings

License

MIT