@seges/angular-ng-intervalpicker NPM

SegesIntervalPickerNg

Prerequisites

Typescript: ">=2.7.2 <2.8.0"

Install of peerDependencies in consuming project

npm install rxjs@6.2.0 ng2-date-picker@2.6.2 moment-es6@1.0.0 --save

How to use

app.component.html example

<div class="content">
  <button md-raised-button class="seges-action-button" (click)="onPickIntervalClicked()" value="Vælg dato">
    {{ startDate | date }}
      <span *ngIf="startDate < endDate">- {{ endDate | date }}</span>
  </button>
</div>

app.component.ts example

import { Component } from '@angular/core';
import { MatDialogRef, MatDialog } from '@angular/material';
import { IntervalPickerComponent, IntervalPickerTranslations } from '@seges/angular-ng-intervalpicker';
import moment from 'moment-es6';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  startDate: Date = new Date(new Date().setDate(new Date().getDate() - 14));
  endDate: Date = new Date(new Date().getFullYear() + 1, 0, 1);
  translations: IntervalPickerTranslations;
  private intervalPickerModalRef: MatDialogRef<any>;

  constructor(
    private mdDialog: MatDialog
  ) {
    this.translations = {
      day: 'day',
      last: 'last',
      current: 'current',
      next: 'next',
      week: 'week',
      month: 'month',
      year: 'year',
      custom: 'custom',
      past7Days: 'past7Days',
      past14Days: 'past14Days',
      past30Days: 'past30Days',
      from: 'from',
      to: 'to',
      singleDate: 'singleDate',
      ok: 'ok',
      cancel: 'cancel'
    }
  }

  // event handlers
  onPickIntervalClicked() {
    this.intervalPickerModalRef = this.mdDialog.open(IntervalPickerComponent, {
      data: {
        startDate: this.startDate,
        endDate: this.endDate,
        translations: this.translations
      }
    });
    this.intervalPickerModalRef.componentInstance.dialogRef = this.intervalPickerModalRef;
    this.intervalPickerModalRef.disableClose = true;

    this.intervalPickerModalRef.afterClosed().subscribe(result => {
      // check if dates has actually been changed
      if (
        !moment(this.startDate).isSame(moment(result.startDate), 'day')
        || !moment(this.endDate).isSame(moment(result.endDate), 'day')
      ) {
        this.startDate = result.startDate;
        this.endDate = result.endDate;
      }
    });
  }
}

app.module.ts example

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { IntervalPickerModule } from '@seges/angular-ng-intervalpicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IntervalPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }