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

@kiwigrid/ngx-daterangepicker

1.1.0 • Public • Published

Angular DateRange Picker

This date range picker based on https://github.com/jkuri/ng-daterangepicker.

Supported Angular versions:

version angular version
1.x 9.x
0.6.x 5.x+

Installation

npm install @kiwigrid/ngx-daterangepicker --save

or

yarn add @kiwigrid/ngx-daterangepicker --save

Example

import { NgxDateRangePickerModule } from '@kiwigrid/ngx-daterangepicker';
 
// app.module.ts
@NgModule({
  ...
  imports[ ..., NgxDateRangePickerModule, ... ],
  ...
})
export class AppModule { }
// app.component.ts
import { Component, OnInit } from '@angular/core';
import {
  NgxDateRangePickerOptions,
  NgxDateRangePickerOutput,
} from '@kiwigrid/ngx-daterangepicker';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  value: NgxDateRangePickerOutput;
  options: NgxDateRangePickerOptions;
 
  ngOnInit() {
    this.options = {
      theme: 'default',
      range: 'TM',
      dayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      presetNames: [
        'Today',
        'This Week',
        'Last 7 Days',
        'Last Week',
        'This Month',
        'Last Month',
        'This Year',
        'Last Year',
        'Start',
        'End',
        'Apply',
        'Cancel',
      ],
      dateFormat: 'yMd',
      startOfWeek: 1,
      position: 'right',
    };
    this.value = {
      from: 0,
      to: 0,
    };
  }
}
<!-- app.component.html -->
<ngx-daterangepicker
  [(ngModel)]="value"
  [options]="options"
></ngx-daterangepicker>

Configuration

export interface NgxDateRangePickerOptions {
  theme: 'default' | 'green' | 'teal' | 'cyan' | 'grape' | 'red' | 'gray';
  range: 'TD' | 'TM' | 'LM' | 'LW' | 'TW' | 'TY' | 'LY' | 'L7D';
  dayNames: string[];
  presetNames: string[];
  dateFormat: string;
  startOfWeek: number;
  position: string;
}

Running the demo

git clone https://github.com/kiwigrid/ngx-daterangepicker.git
cd ngx-daterangepicker
npm install
npm start

Licence

MIT

Install

npm i @kiwigrid/ngx-daterangepicker

DownloadsWeekly Downloads

84

Version

1.1.0

License

MIT

Unpacked Size

394 kB

Total Files

23

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar