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

Usage no npm install needed!

<script type="module">
  import ngxDatetimeRangePicker from '';



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

Build Status npm version

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



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";

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

Usage example




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",


Option Type Description
dateArray Array Only the dates in the array will be enabled
startDate string Start date
endDate string End date
minDate string Min date
maxDate string Max date
startTime string Start time (only for timepicker)
endTime string End time (only for timepicker)
minTime string Min time (only for timepicker)
maxTime string Max time (only for timepicker)


Setting Type Default Description
type string 'daily' type (daily
timePicker boolean false enable/disable timepicker
inputDateFormat string "YYYY-MM-DD" input date format
viewDateFormat string "YYYY-MM-DD" date format to view the date in
outputDateFormat string "YYYY-MM-DD" date format in which change event will return the date in
singleDatePicker boolean false enable/disable single date picker
componentDisabled string false enable/disable component
placeholder string "Select Date" placeholder/title of the component
showRowNumber boolean true hide/show week numers for daily
availableRanges Object {"Last 7 Days": {startDate: inputDateFormat, endDate: inputDateFormat}, "Last 30 days": {...}, "Last 90 days": {...}} ranges to show
showRanges boolean true hide/show ranges
disableWeekends boolean false enable/disable weekends
disableWeekdays boolean false enable/disable weekdays
displayBeginDate boolean false show begin date in input
displayEndDate boolean false show end date in input