https://github.com/jkuri/ng-daterangepicker

Angular Date Range Picker inspired by PayPal's one
https://github.com/jkuri/ng-daterangepicker

angular angular-component date datepicker datepicker-component ng2

Last synced: 1 day ago
JSON representation

Angular Date Range Picker inspired by PayPal's one

• Host: GitHub
• URL: https://github.com/jkuri/ng-daterangepicker
• Owner: jkuri
• License: mit
• Created: 2017-03-09T21:29:21.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-10T15:51:53.000Z (over 4 years ago)
• Last Synced: 2024-10-26T03:42:33.606Z (16 days ago)
• Topics: angular, angular-component, date, datepicker, datepicker-component, ng2
• Language: TypeScript
• Homepage:
• Size: 581 KB
• Stars: 68
• Watchers: 7
• Forks: 43
• Open Issues: 29
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - jkuri/ng-daterangepicker - Angular Date Range Picker inspired by PayPal's one (UI Components / Form)

README

        
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

```sh

npm install ng-daterangepicker --save

```

or

```sh

yarn add ng-daterangepicker --save

```

### Example

```ts

import { NgDateRangePickerModule } from 'ng-daterangepicker';

// app.module.ts

@NgModule({

  ...

  imports: [ ..., NgDateRangePickerModule, ... ],

  ...

})

export class AppModule { }

```

```ts

// 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

	};

  }

}

```

```html

```

### Configuration

```ts

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

```sh

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

cd ng-daterangepicker

npm start

```

### Licence

MIT