Miss any of our Open RFC calls?Watch the recordings here! »

ngx-datetime-range-picker

2.0.2 • Public • Published

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

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

Install

npm i ngx-datetime-range-picker

DownloadsWeekly Downloads

150

Version

2.0.2

License

none

Unpacked Size

3.86 MB

Total Files

43

Last publish

Collaborators

  • avatar