@seges/angular-ng-intervalpicker

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 { }

Build and public this module to NPM

Run this command in root directory to build NPM ready code in dist directory

npm run packagr

Change to dist directory

cd dist

Create NPM packaga

npm pack

Upload to NPM from dist directory

npm publish