ngx-datetime-range-picker-ng13

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

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

License

MIT