Skip to content

jkuri/ng-daterangepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9b1d453 · Mar 22, 2018

History

40 Commits
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 28, 2017
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018
Mar 22, 2018

Repository files navigation

Angular DateRange Picker

This date range picker was heavily inspired by PayPal's datepicker as seen on website.

Demo: http://ng-daterangepicker.jankuri.com

Installation

npm install ng-daterangepicker --save

or

yarn add ng-daterangepicker --save

Example

import { NgDateRangePickerModule } from 'ng-daterangepicker';

// app.module.ts
@NgModule({
  ...
  imports: [ ..., NgDateRangePickerModule, ... ],
  ...
})
export class AppModule { }
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgDateRangePickerOptions } from 'ng-daterangepicker';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  options: NgDateRangePickerOptions;

  ngOnInit() {
    this.options = {
	  theme: 'default',
	  range: 'tm',
	  dayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	  presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Start', 'End'],
	  dateFormat: 'yMd',
	  outputFormat: 'DD/MM/YYYY',
	  startOfWeek: 1
	};
  }
}
<!-- app.component.html -->
<ng-daterangepicker [(ngModel)]="value" [options]="options"></ng-daterangepicker>

Configuration

export interface NgDateRangePickerOptions {
  theme: 'default' | 'green' | 'teal' | 'cyan' | 'grape' | 'red' | 'gray';
  range: 'tm' | 'lm' | 'lw' | 'tw' | 'ty' | 'ly';
  dayNames: string[];
  presetNames: string[];
  dateFormat: string;
  outputFormat: string;
  startOfWeek: number;
}

Running the demo

git clone https://github.com/jkuri/ng-daterangepicker.git --depth 1
cd ng-daterangepicker
npm start

Licence

MIT