New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
ng2-daterangepicker
Advanced tools
ng2-daterangepicker - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
142
package.json
| { | ||
| "name": "ng2-daterangepicker", | ||
| "version": "2.0.0", | ||
| "description": "Angular 2 DaterangePicker component", | ||
| "scripts": { | ||
| "start": "webpack-dev-server --inline --progress --port 8080", | ||
| "test": "karma start", | ||
| "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/evansmwendwa/ng2-daterangepicker" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/evansmwendwa/ng2-daterangepicker/issues" | ||
| }, | ||
| "homepage": "https://github.com/evansmwendwa/ng2-daterangepicker#readme", | ||
| "licenses": [ | ||
| { | ||
| "type": "MIT", | ||
| "url": "https://github.com/angular/angular.io/blob/master/LICENSE" | ||
| "name": "ng2-daterangepicker", | ||
| "version": "2.0.1", | ||
| "description": "Angular 2 DaterangePicker component", | ||
| "scripts": { | ||
| "start": "webpack-dev-server --inline --progress --port 8080", | ||
| "test": "karma start", | ||
| "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/evansmwendwa/ng2-daterangepicker" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/evansmwendwa/ng2-daterangepicker/issues" | ||
| }, | ||
| "homepage": "https://github.com/evansmwendwa/ng2-daterangepicker#readme", | ||
| "license": [{ | ||
| "type": "MIT", | ||
| "url": "https://github.com/angular/angular.io/blob/master/LICENSE" | ||
| }], | ||
| "main": "index.js", | ||
| "files": [ | ||
| "README.md", | ||
| "index.js", | ||
| "index.ts", | ||
| "src/app/daterangepicker/*" | ||
| ], | ||
| "dependencies": { | ||
| "@types/jquery": "^2.0.40", | ||
| "bootstrap-daterangepicker": "^2.1.25", | ||
| "jquery": "^3.1.1", | ||
| "moment": "^2.16.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "^7.0.7", | ||
| "@angular/common": "^2.2.0", | ||
| "@angular/compiler": "^2.2.0", | ||
| "@angular/core": "^2.2.0", | ||
| "@angular/forms": "^2.2.0", | ||
| "@angular/http": "^2.2.0", | ||
| "@angular/platform-browser": "^2.2.0", | ||
| "@angular/platform-browser-dynamic": "^2.2.0", | ||
| "@angular/router": "^3.2.0", | ||
| "@types/core-js": "^0.9.34", | ||
| "@types/jasmine": "^2.5.35", | ||
| "angular2-template-loader": "^0.4.0", | ||
| "awesome-typescript-loader": "^3.1.2", | ||
| "core-js": "^2.4.1", | ||
| "css-loader": "^0.23.1", | ||
| "extract-text-webpack-plugin": "^1.0.1", | ||
| "file-loader": "^0.8.5", | ||
| "html-loader": "^0.4.3", | ||
| "html-webpack-plugin": "^2.15.0", | ||
| "jasmine-core": "^2.4.1", | ||
| "karma": "^1.2.0", | ||
| "karma-jasmine": "^1.0.2", | ||
| "karma-phantomjs-launcher": "^1.0.2", | ||
| "karma-sourcemap-loader": "^0.3.7", | ||
| "karma-webpack": "^1.8.0", | ||
| "null-loader": "^0.1.1", | ||
| "phantomjs-prebuilt": "^2.1.7", | ||
| "raw-loader": "^0.5.1", | ||
| "rimraf": "^2.5.2", | ||
| "rxjs": "^5.0.0-beta.12", | ||
| "style-loader": "^0.13.1", | ||
| "typescript": "^2.0.3", | ||
| "webpack": "^1.13.0", | ||
| "webpack-dev-server": "^1.14.1", | ||
| "webpack-merge": "^0.14.0", | ||
| "zone.js": ">=0.6.25 <0.8.0" | ||
| } | ||
| ], | ||
| "main": "index.js", | ||
| "files": [ | ||
| "README.md", | ||
| "index.js", | ||
| "index.ts", | ||
| "src/app/daterangepicker/*" | ||
| ], | ||
| "dependencies": { | ||
| "@angular/common": "^2.2.0", | ||
| "@angular/compiler": "^2.2.0", | ||
| "@angular/core": "^2.2.0", | ||
| "@angular/forms": "^2.2.0", | ||
| "@angular/http": "^2.2.0", | ||
| "@angular/platform-browser": "^2.2.0", | ||
| "@angular/platform-browser-dynamic": "^2.2.0", | ||
| "@angular/router": "^3.2.0", | ||
| "bootstrap-daterangepicker": "^2.1.24", | ||
| "core-js": "^2.4.1", | ||
| "jquery": "^3.1.1", | ||
| "moment": "^2.16.0", | ||
| "rxjs": "^5.0.0-beta.12", | ||
| "zone.js": ">=0.6.25 <0.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/core-js": "^0.9.34", | ||
| "@types/jasmine": "^2.5.35", | ||
| "@types/jquery": "^2.0.40", | ||
| "@types/node": "^6.0.45", | ||
| "angular2-template-loader": "^0.4.0", | ||
| "awesome-typescript-loader": "^2.2.4", | ||
| "css-loader": "^0.23.1", | ||
| "extract-text-webpack-plugin": "^1.0.1", | ||
| "file-loader": "^0.8.5", | ||
| "html-loader": "^0.4.3", | ||
| "html-webpack-plugin": "^2.15.0", | ||
| "jasmine-core": "^2.4.1", | ||
| "karma": "^1.2.0", | ||
| "karma-jasmine": "^1.0.2", | ||
| "karma-phantomjs-launcher": "^1.0.2", | ||
| "karma-sourcemap-loader": "^0.3.7", | ||
| "karma-webpack": "^1.8.0", | ||
| "null-loader": "^0.1.1", | ||
| "phantomjs-prebuilt": "^2.1.7", | ||
| "raw-loader": "^0.5.1", | ||
| "rimraf": "^2.5.2", | ||
| "style-loader": "^0.13.1", | ||
| "typescript": "^2.0.3", | ||
| "webpack": "^1.13.0", | ||
| "webpack-dev-server": "^1.14.1", | ||
| "webpack-merge": "^0.14.0" | ||
| } | ||
| } |
@@ -9,17 +9,2 @@ ## ng2-daterangepicker | ||
| ### install typings for jQuery | ||
| ``` | ||
| npm install --save-dev @types/jquery | ||
| ``` | ||
| ### Add the following in your custom typings `custom*.d.ts` | ||
| ``` javascript | ||
| // src/typings.d.ts (if using Angular ClI) | ||
| // src/custom-typings.d.ts (Angular Starter Example) | ||
| interface JQuery { | ||
| daterangepicker(target?:any, callback?:any): JQuery; | ||
| } | ||
| ``` | ||
| ### Usage | ||
@@ -33,2 +18,10 @@ | ||
| **NB: Override icon classes with your own custom icons if you are using Bootstrap 4 without glyphs and without fontawesome. Classes used are below** | ||
| ``` | ||
| fa fa-calendar glyphicon glyphicon-calendar | ||
| fa fa-chevron-left glyphicon glyphicon-chevron-left | ||
| fa fa-chevron-right glyphicon glyphicon-chevron-right | ||
| ``` | ||
| import the `Daterangepicker` module in your application module | ||
@@ -45,3 +38,3 @@ | ||
| Use the directive in your component by passing in options `{}` and consuming the `selected` event. | ||
| Use the `daterangepicker` directive in your component by passing in options `{}` and consuming the `selected` event. | ||
| See this project's `src/app/app.component.ts` for a full usage example | ||
@@ -85,2 +78,20 @@ | ||
| ## Customizing the CSS | ||
| > **Skip Adding CSS in Head** - You can bundle the css that styles the calendar in your app by copying or importing the contents of `./src/app/daterangepicker/daterangepicker.css` and customizing as you like. When you do so set the `skipCSS` property of the config service to `true` | ||
| ``` javascript | ||
| import { DaterangepickerConfig } from 'ng2-daterangepicker'; | ||
| @Component({ | ||
| selector:'my-app', | ||
| template:'<h3>Component Template</h3>' | ||
| }) | ||
| export class AppComponent { | ||
| constructor(private daterangepickerOptions: DaterangepickerConfig) { | ||
| this.daterangepickerOptions.skipCSS = true; | ||
| } | ||
| } | ||
| ``` | ||
| ## Using Daterangepicker Events | ||
@@ -87,0 +98,0 @@ |
@@ -11,7 +11,21 @@ "use strict"; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var core_1 = require("@angular/core"); | ||
| var $ = require("jquery"); | ||
| var DaterangepickerConfig = (function () { | ||
| function DaterangepickerConfig() { | ||
| this.skipCSS = false; | ||
| this.addedCSS = false; | ||
| this.settings = {}; | ||
| } | ||
| DaterangepickerConfig.prototype.embedCSS = function () { | ||
| // avoid adding duplicated styles | ||
| if (this.addedCSS) { | ||
| return; | ||
| } | ||
| if (!this.skipCSS) { | ||
| $('head').append('<style>' + require('./daterangepicker.css') + '</style>'); | ||
| this.addedCSS = true; | ||
| } | ||
| }; | ||
| return DaterangepickerConfig; | ||
@@ -18,0 +32,0 @@ }()); |
| import { Injectable } from '@angular/core'; | ||
| declare var require:any; | ||
| import * as $ from "jquery"; | ||
| @Injectable() | ||
@@ -7,2 +10,4 @@ export class DaterangepickerConfig { | ||
| public settings: any; | ||
| public skipCSS: boolean = false; | ||
| private addedCSS = false; | ||
@@ -13,2 +18,14 @@ constructor() { | ||
| public embedCSS(): void { | ||
| // avoid adding duplicated styles | ||
| if(this.addedCSS) { | ||
| return; | ||
| } | ||
| if(!this.skipCSS) { | ||
| $('head').append('<style>'+ require('./daterangepicker.css')+'</style>'); | ||
| this.addedCSS = true; | ||
| } | ||
| } | ||
| } |
@@ -32,4 +32,7 @@ "use strict"; | ||
| var _this = this; | ||
| $('head').append('<style>' + require('./daterangepicker.css') + '</style>'); | ||
| var targetOptions = Object.assign({}, this.config.settings, this.options); | ||
| // tell config service to embed the css | ||
| this.config.embedCSS(); | ||
| // cast $ to any to avoid jquery type checking | ||
| //$(this.input.nativeElement).daterangepicker(targetOptions, this.callback.bind(this)); | ||
| $(this.input.nativeElement).daterangepicker(targetOptions, this.callback.bind(this)); | ||
@@ -36,0 +39,0 @@ $(this.input.nativeElement).on('cancel.daterangepicker', function (e, picker) { |
@@ -5,4 +5,2 @@ import { Directive, OnInit, AfterViewInit, Input, Output, EventEmitter, ElementRef } from '@angular/core'; | ||
| declare var require:any; | ||
| import * as $ from "jquery"; | ||
@@ -31,8 +29,12 @@ import * as moment from 'moment'; | ||
| ngAfterViewInit() { | ||
| $('head').append('<style>'+ require('./daterangepicker.css')+'</style>'); | ||
| let targetOptions: any = Object.assign({}, this.config.settings, this.options); | ||
| $(this.input.nativeElement).daterangepicker(targetOptions, this.callback.bind(this)); | ||
| // tell config service to embed the css | ||
| this.config.embedCSS(); | ||
| // cast $ to any to avoid jquery type checking | ||
| //$(this.input.nativeElement).daterangepicker(targetOptions, this.callback.bind(this)); | ||
| (<any>$(this.input.nativeElement)).daterangepicker(targetOptions, this.callback.bind(this)); | ||
| $(this.input.nativeElement).on('cancel.daterangepicker', | ||
@@ -39,0 +41,0 @@ (e:any, picker:any) => { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
34054
8.21%- Dependency count
4
-71.43%- Lines of code
642
20%- Number of lines in readme file
164
7.19%Worsened metrics
- Dev dependency count
36
38.46%- Number of package files
17
-5.56%Dependency changes
+ Added
@types/jquery@^2.0.40+ Added
@types/jquery@2.0.68(transitive)- Removed
@angular/common@^2.2.0- Removed
@angular/compiler@^2.2.0- Removed
@angular/core@^2.2.0- Removed
@angular/forms@^2.2.0- Removed
@angular/http@^2.2.0- Removed
@angular/platform-browser@^2.2.0- Removed
@angular/router@^3.2.0- Removed
core-js@^2.4.1- Removed
rxjs@^5.0.0-beta.12- Removed
zone.js@>=0.6.25 <0.8.0- Removed
@angular/common@2.4.10(transitive)- Removed
@angular/compiler@2.4.10(transitive)- Removed
@angular/core@2.4.10(transitive)- Removed
@angular/forms@2.4.10(transitive)- Removed
@angular/http@2.4.10(transitive)- Removed
@angular/platform-browser@2.4.10(transitive)- Removed
@angular/platform-browser-dynamic@2.4.10(transitive)- Removed
@angular/router@3.4.10(transitive)- Removed
core-js@2.6.12(transitive)- Removed
rxjs@5.5.12(transitive)- Removed
symbol-observable@1.0.1(transitive)- Removed
zone.js@0.7.8(transitive)