ndr
ngx-datetime-range-picker
npm i ngx-datetime-range-picker
ndr

ngx-datetime-range-picker

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

by Bhavin Patel

3.0.1 (see all)TypeScript:Built-In
npm i ngx-datetime-range-picker
Readme

ngx-datetime-range-picker

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.

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

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

Downloads/wk

209

GitHub Stars

23

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

10

OPEN PRs

19
VersionTagPublished
3.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate