Home

Awesome

ngx-datetime-range-picker

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

Build Status npm version

This plugin uses bootstrap and moment.js

Demo

React version

reactjs-datetime-range-picker

Installation

Install the plugin from npm:

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

import NgxDatetimeRangePickerModule in your module:

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
...
import { FormsModule } from "@angular/forms";
import { NgxDatetimeRangePickerModule } from "ngx-datetime-range-picker";
import { AppComponent } from "./app.component";

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

Tell ngx-datetime-range-picker which theme to use:<br/>

SCSS

Add below config in your style.scss/some-cool-name-theme.scss, which has material theme (or not) and is imported in your angular.json

// Top of the file
@use "ngx-datetime-range-picker/ngx-datetime-range-picker.component.scss" as ndtrp;

// You would need to include the themes for below components if you are not including them already
@include mat.form-field-theme($your-app-theme);
@include mat.icon-theme($your-app-theme);
@include mat.button-theme($your-app-theme);
@include mat.select-theme($your-app-theme);

@include ndtrp.ngx-datetime-range-picker-theme($your-app-theme);

If you don't have a theme and want to use library's default theme

// Top of the file
@use "ngx-datetime-range-picker/ngx-datetime-range-picker.component.scss" as ndtrp;

// You would need to include the themes for below components if you are not including them already
@include mat.form-field-theme(ndtrp.$ndtrp-app-theme);
@include mat.icon-theme(ndtrp.$ndtrp-app-theme);
@include mat.button-theme(ndtrp.$ndtrp-app-theme);
@include mat.select-theme(ndtrp.$ndtrp-app-theme);

@include ndtrp.ngx-datetime-range-picker-theme();

Note: Themes for components are not included in the library to avoid duplicate styles error

CSS

Add below config in your style.css/some-cool-name-theme.css and is imported in your angular.json

@import "ngx-datetime-range-picker/ngx-datetime-range-picker.theme.css";

Note: Make sure whichever file you are adding this to should be imported in angular.json

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

OptionTypeDescription
dateArrayArrayOnly the dates in the array will be enabled
startDatestringStart date
endDatestringEnd date
minDatestringMin date
maxDatestringMax date
startTimestringStart time (only for timepicker)
endTimestringEnd time (only for timepicker)
minTimestringMin time (only for timepicker)
maxTimestringMax time (only for timepicker)

Settings

SettingTypeDefaultDescription
typestring'daily'type (daily
timePickerbooleanfalseenable/disable timepicker
inputDateFormatstring"YYYY-MM-DD"input date format
viewDateFormatstring"YYYY-MM-DD"date format to view the date in
outputDateFormatstring"YYYY-MM-DD"date format in which change event will return the date in
singleDatePickerbooleanfalseenable/disable single date picker
componentDisabledstringfalseenable/disable component
placeholderstring"Select Date"placeholder/title of the component
showRowNumberbooleantruehide/show week numers for daily
availableRangesObject{"Last 7 Days": {startDate: inputDateFormat, endDate: inputDateFormat}, "Last 30 days": {...}, "Last 90 days": {...}}ranges to show
showRangesbooleantruehide/show ranges
disableWeekendsbooleanfalseenable/disable weekends
disableWeekdaysbooleanfalseenable/disable weekdays
displayBeginDatebooleanfalseshow begin date in input
displayEndDatebooleanfalseshow end date in input

License

MIT