ng2-daterangepicker - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

index.d.ts

 export * from './lib/daterangepicker/daterangepicker.module';
 export * from './lib/daterangepicker/daterangepicker.component';
 export * from './lib/daterangepicker/config.service';

index.js

 exports.Daterangepicker = require('./lib/daterangepicker/daterangepicker.module').Daterangepicker;
 exports.DaterangePickerComponent = require('./lib/daterangepicker/daterangepicker.component').DaterangePickerComponent;
 exports.DaterangepickerConfig = require('./lib/daterangepicker/config.service').DaterangepickerConfig;

lib/daterangepicker/config.service.d.ts

@@ -0,0 +0,0 @@ export declare class DaterangepickerConfig {

lib/daterangepicker/config.service.js

@@ -21,9 +21,9 @@ "use strict";
     };
+    DaterangepickerConfig.decorators = [
+        { type: core_1.Injectable },
+    ];
+    DaterangepickerConfig.ctorParameters = function () { return []; };
     return DaterangepickerConfig;
 }());
-DaterangepickerConfig.decorators = [
-    { type: core_1.Injectable },
-];
-DaterangepickerConfig.ctorParameters = function () { return []; };
 exports.DaterangepickerConfig = DaterangepickerConfig;
 //# sourceMappingURL=config.service.js.map

lib/daterangepicker/daterangepicker.component.d.ts

@@ -1,7 +0,13 @@
-import { AfterViewInit, EventEmitter, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, EventEmitter } from '@angular/core';
+import { KeyValueDiffers, ElementRef, OnDestroy, DoCheck } from '@angular/core';
 import { DaterangepickerConfig } from './config.service';
 import 'bootstrap-daterangepicker';
-export declare class DaterangePickerComponent implements AfterViewInit, OnDestroy {
+export declare class DaterangePickerComponent implements AfterViewInit, OnDestroy, DoCheck {
     private input;
     private config;
+    private differs;
+    private activeRange;
+    private targetOptions;
+    private _differ;
+    datePicker: any;
     options: any;
@@ -15,7 +21,10 @@ selected: EventEmitter<{}>;
     showDaterangepicker: EventEmitter<{}>;
-    datePicker: any;
-    constructor(input: ElementRef, config: DaterangepickerConfig);
+    constructor(input: ElementRef, config: DaterangepickerConfig, differs: KeyValueDiffers);
     ngAfterViewInit(): void;
+    render(): void;
+    attachEvents(): void;
     private callback(start?, end?, label?);
+    destroyPicker(): void;
     ngOnDestroy(): void;
+    ngDoCheck(): void;
 }

lib/daterangepicker/daterangepicker.component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
+var core_2 = require("@angular/core");
 var config_service_1 = require("./config.service");
@@ -8,5 +9,8 @@ var $ = require("jquery");
 var DaterangePickerComponent = (function () {
-    function DaterangePickerComponent(input, config) {
+    function DaterangePickerComponent(input, config, differs) {
         this.input = input;
         this.config = config;
+        this.differs = differs;
+        this.targetOptions = {};
+        this._differ = {};
         this.options = {};
@@ -20,9 +24,17 @@ this.selected = new core_1.EventEmitter();
         this.showDaterangepicker = new core_1.EventEmitter();
+        this._differ['options'] = differs.find(this.options).create(null);
+        this._differ['settings'] = differs.find(this.config.settings).create(null);
     }
     DaterangePickerComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var targetOptions = Object.assign({}, this.config.settings, this.options);
         this.config.embedCSS();
-        $(this.input.nativeElement).daterangepicker(targetOptions, this.callback.bind(this));
+        this.render();
+        this.attachEvents();
+    };
+    DaterangePickerComponent.prototype.render = function () {
+        this.targetOptions = Object.assign({}, this.config.settings, this.options);
+        $(this.input.nativeElement).daterangepicker(this.targetOptions, this.callback.bind(this));
         this.datePicker = $(this.input.nativeElement).data('daterangepicker');
+    };
+    DaterangePickerComponent.prototype.attachEvents = function () {
+        var _this = this;
         $(this.input.nativeElement).on('cancel.daterangepicker', function (e, picker) {
@@ -54,3 +66,3 @@ var event = { event: e, picker: picker };
     DaterangePickerComponent.prototype.callback = function (start, end, label) {
-        var obj = {
+        this.activeRange = {
             start: start,
@@ -60,5 +72,5 @@ end: end,
         };
-        this.selected.emit(obj);
+        this.selected.emit(this.activeRange);
     };
-    DaterangePickerComponent.prototype.ngOnDestroy = function () {
+    DaterangePickerComponent.prototype.destroyPicker = function () {
         try {
@@ -71,24 +83,39 @@ $(this.input.nativeElement).data('daterangepicker').remove();
     };
+    DaterangePickerComponent.prototype.ngOnDestroy = function () {
+        this.destroyPicker();
+    };
+    DaterangePickerComponent.prototype.ngDoCheck = function () {
+        var optionsChanged = this._differ['options'].diff(this.options);
+        var settingsChanged = this._differ['settings'].diff(this.config.settings);
+        if (optionsChanged || settingsChanged) {
+            this.render();
+            if (this.activeRange && this.datePicker) {
+                this.datePicker.setStartDate(this.activeRange.start);
+                this.datePicker.setEndDate(this.activeRange.end);
+            }
+        }
+    };
+    DaterangePickerComponent.decorators = [
+        { type: core_1.Directive, args: [{
+                    selector: '[daterangepicker]',
+                },] },
+    ];
+    DaterangePickerComponent.ctorParameters = function () { return [
+        { type: core_2.ElementRef, },
+        { type: config_service_1.DaterangepickerConfig, },
+        { type: core_2.KeyValueDiffers, },
+    ]; };
+    DaterangePickerComponent.propDecorators = {
+        'options': [{ type: core_1.Input },],
+        'selected': [{ type: core_1.Output },],
+        'cancelDaterangepicker': [{ type: core_1.Output },],
+        'applyDaterangepicker': [{ type: core_1.Output },],
+        'hideCalendarDaterangepicker': [{ type: core_1.Output },],
+        'showCalendarDaterangepicker': [{ type: core_1.Output },],
+        'hideDaterangepicker': [{ type: core_1.Output },],
+        'showDaterangepicker': [{ type: core_1.Output },],
+    };
     return DaterangePickerComponent;
 }());
-DaterangePickerComponent.decorators = [
-    { type: core_1.Directive, args: [{
-                selector: '[daterangepicker]'
-            },] },
-];
-DaterangePickerComponent.ctorParameters = function () { return [
-    { type: core_1.ElementRef, },
-    { type: config_service_1.DaterangepickerConfig, },
-]; };
-DaterangePickerComponent.propDecorators = {
-    'options': [{ type: core_1.Input },],
-    'selected': [{ type: core_1.Output },],
-    'cancelDaterangepicker': [{ type: core_1.Output },],
-    'applyDaterangepicker': [{ type: core_1.Output },],
-    'hideCalendarDaterangepicker': [{ type: core_1.Output },],
-    'showCalendarDaterangepicker': [{ type: core_1.Output },],
-    'hideDaterangepicker': [{ type: core_1.Output },],
-    'showDaterangepicker': [{ type: core_1.Output },],
-};
 exports.DaterangePickerComponent = DaterangePickerComponent;
 //# sourceMappingURL=daterangepicker.component.js.map

lib/daterangepicker/daterangepicker.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DaterangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[daterangepicker]"}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cancelDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"applyDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./config.service","name":"DaterangepickerConfig"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"callback":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DaterangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[daterangepicker]"}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cancelDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"applyDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./config.service","name":"DaterangepickerConfig"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"callback":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DaterangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[daterangepicker]"}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cancelDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"applyDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./config.service","name":"DaterangepickerConfig"},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"attachEvents":[{"__symbolic":"method"}],"callback":[{"__symbolic":"method"}],"destroyPicker":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DaterangePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[daterangepicker]"}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cancelDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"applyDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showCalendarDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"hideDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"showDaterangepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./config.service","name":"DaterangepickerConfig"},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"attachEvents":[{"__symbolic":"method"}],"callback":[{"__symbolic":"method"}],"destroyPicker":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}]}}}}]

lib/daterangepicker/daterangepicker.module.d.ts

 export declare class Daterangepicker {
 }

lib/daterangepicker/daterangepicker.module.js

@@ -9,13 +9,13 @@ "use strict";
     }
+    Daterangepicker.decorators = [
+        { type: core_1.NgModule, args: [{
+                    declarations: [daterangepicker_component_1.DaterangePickerComponent],
+                    providers: [config_service_1.DaterangepickerConfig],
+                    exports: [daterangepicker_component_1.DaterangePickerComponent]
+                },] },
+    ];
+    Daterangepicker.ctorParameters = function () { return []; };
     return Daterangepicker;
 }());
-Daterangepicker.decorators = [
-    { type: core_1.NgModule, args: [{
-                declarations: [daterangepicker_component_1.DaterangePickerComponent],
-                providers: [config_service_1.DaterangepickerConfig],
-                exports: [daterangepicker_component_1.DaterangePickerComponent]
-            },] },
-];
-Daterangepicker.ctorParameters = function () { return []; };
 exports.Daterangepicker = Daterangepicker;
 //# sourceMappingURL=daterangepicker.module.js.map

package.json

 {
   "name": "ng2-daterangepicker",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Angular 2 DaterangePicker component",
@@ -9,2 +9,3 @@ "scripts": {
     "build": "ng build",
+    "build-prod": "ng build --aot --prod",
     "test": "ng test",
@@ -34,3 +35,3 @@ "lint": "ng lint",
   "dependencies": {
-    "@types/jquery": "^2.0.40",
+    "@types/jquery": "^3.2.12",
     "bootstrap-daterangepicker": "^2.1.25",
@@ -41,3 +42,3 @@ "jquery": "^3.1.1",
   "devDependencies": {
-    "@angular/cli": "1.0.0",
+    "@angular/cli": "1.3.2",
     "@angular/common": "^4.0.0",
@@ -53,12 +54,12 @@ "@angular/compiler": "^4.0.0",
     "@angular/router": "^4.0.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
+    "@types/jasmine": "2.5.54",
+    "@types/node": "~8.0.24",
+    "codelyzer": "~3.1.2",
     "core-js": "^2.4.1",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "jasmine-core": "~2.7.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "~1.1.0",
@@ -69,7 +70,7 @@ "karma-jasmine-html-reporter": "^0.2.2",
     "rxjs": "^5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0",
+    "ts-node": "~3.3.0",
+    "tslint": "~5.6.0",
+    "typescript": "~2.4.2",
     "zone.js": "^0.8.4"
   }
 }

README.md

 ## ng2-daterangepicker
-This is a port of the popular Daterange Picker for Bootstrap now optimized for easy use as an importable Angular 2 Module and installable using npm.
+This is an Angular 2+ port of the popular Date Range Picker for Bootstrap http://www.daterangepicker.com/
 
@@ -80,3 +80,3 @@ ### Demos and Sample Usage
     selector: 'my-app',
-    template: `<input type="text" name="daterangeInput" daterangepicker [options]="options" (selected)="selectedDate($event)" />`,
+    template: `<input type="text" name="daterangeInput" daterangepicker [options]="options" (selected)="selectedDate($event, daterange)" />`,
 })
@@ -94,3 +94,11 @@ export class AppComponent {
 
-    public selectedDate(value: any) {
+    public selectedDate(value: any, datepicker?: any) {
+        // this is the date the iser selected
+        console.log(value);
+
+        // any object can be passed to the selected event and it will be passed back here
+        datepicker.start = value.start;
+        datepicker.end = value.end;
+
+        // or manupulat your own internal property
         this.daterange.start = value.start;
@@ -97,0 +105,0 @@ this.daterange.end = value.end;

No alert changes

Improved metrics

Number of lines in readme file

247

3.35%

Worsened metrics

Total package byte prevSize

44797

-1.96%

Number of package files

17

-15%

Lines of code

571

-2.56%

Dependency changes

• + Added

  @types/jquery@3.5.32
  (transitive)

• + Added

  @types/sizzle@2.3.9
  (transitive)

• - Removed

  @types/jquery@2.0.68
  (transitive)

• Updated

  @types/jquery@^3.2.12