Skip to content

Angular material datetime range picker with daily, weekly, monthly, quarterly & yearly levels

License

Notifications You must be signed in to change notification settings

BhavinPatel04/ngx-datetime-range-picker

Repository files navigation

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:

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

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)

Settings

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

MIT