angular - Angular2 RC7 ng2-datetime Error- ($(...).datepicker is not a function) -

i declare var , replace $ jquery.

1.i declare var jquery: any; 2. replace $ jquery; (error clear in ts) 3. configure in system.config.json , import in app.module 4. , have bootstrap-datepicker in node-module

the error datetime input box didn't work , error show in console ($(...).datepicker not function). changed $ jquery in ts.please me.

ng2-datetime.ts

  import {             component, output, input, eventemitter, hostlistener, afterviewinit, ondestroy,             simplechanges, onchanges         } '@angular/core';         import { controlvalueaccessor, ngcontrol } '@angular/forms';         import { timepickerevent } './timepicker-event-interface';         declare var jquery: any;       @component({         selector: 'datetime',         template: `         <div class="form-inline">             <div id="{{iddatepicker}}" class="input-group date">                 <input type="text" class="form-control"                        [attr.readonly]="readonly"                        [attr.placeholder]="datepickeroptions.placeholder || 'choose date'"                        [(ngmodel)]="datemodel"                        (keyup)="checkemptyvalue($event)"/>                 <div class="input-group-addon">                     <span [ngclass]="datepickeroptions.icon || 'glyphicon glyphicon-th'"></span>                 </div>             </div>             <div class="input-group bootstrap-timepicker timepicker">                 <input id="{{idtimepicker}}" type="text" class="form-control input-small"                         [attr.readonly]="readonly"                        [attr.placeholder]="timepickeroptions.placeholder || 'set time'"                        [(ngmodel)]="timemodel"                        (keyup)="checkemptyvalue($event)">                 <span class="input-group-addon"><i [ngclass]="timepickeroptions.icon || 'glyphicon glyphicon-time'"></i></span>             </div>             <button *ngif="hasclearbutton" type="button" (click)="onclearclick()">clear</button>         </div>        `     })     export class nkdatetime implements controlvalueaccessor, afterviewinit, ondestroy, onchanges {         @output()         datechange: eventemitter<date> = new eventemitter<date>();          @input('timepicker')         timepickeroptions: = {};          @input('datepicker')         datepickeroptions: = {};          @input('hasclearbutton')         hasclearbutton: boolean = false;          @input()         readonly: boolean = null;          date: date; // ngmodel         datemodel: string;         timemodel: string;          // instances         datepicker: any;         timepicker: any;          private iddatepicker: string = uniqueid('q-datepicker_');         private idtimepicker: string = uniqueid('q-timepicker_');          @hostlistener('datechange', ['$event'])         onchange = (_: any) => {         };         ontouched = () => {         };          constructor(ngcontrol: ngcontrol) {             ngcontrol.valueaccessor = this; // override valueaccessor         }          ngafterviewinit() {             this.init();         }          ngondestroy() {             if (this.datepicker) {                 this.datepicker.datepicker('destroy');             }             if (this.timepicker) {                 this.timepicker.timepicker('remove');             }         }          ngonchanges(changes: simplechanges) {             if (changes) {                 if (changes['datepickeroptions'] && this.datepicker) {                     this.datepicker.datepicker('destroy');                      if (changes['datepickeroptions'].currentvalue) {                         this.datepicker = null;                         this.init();                     } else if (changes['datepickeroptions'].currentvalue === false) {                         this.datepicker.remove();                     }                 }                 if (changes['timepickeroptions'] && this.timepicker) {                     this.timepicker.timepicker('remove');                      if (changes['timepickeroptions'].currentvalue) {                         this.timepicker = null;                         this.init();                     } else if (changes['timepickeroptions'].currentvalue === false) {                         this.timepicker.parent().remove();                     }                 }             }         }          writevalue(value: any): void {             this.date = value;             if (isdate(this.date)) {                 settimeout(() => {                     this.updatemodel(this.date);                 }, 0);             }         }          registeronchange(fn: (_: any) => void): void {             this.onchange = fn;         }          registerontouched(fn: () => void): void {             this.ontouched = fn;         }          checkemptyvalue(e: any) {             const value = e.target.value;             if (value === '' && (                     this.timepickeroptions === false ||                     this.datepickeroptions === false ||                     (this.timemodel === '' && this.datemodel === '')                 )) {                 this.datechange.emit(null);             }         }          onclearclick() {             this.datechange.emit(null);             if (this.timepicker) {                 this.timepicker.timepicker('settime', null);             }             this.updatedatepicker(null);         }          //////////////////////////////////          private init(): void {             if (!this.datepicker && this.datepickeroptions !== false) {                 let options = jquery.extend({ enableonreadonly: !this.readonly }, this.datepickeroptions);                 this.datepicker = (<any>jquery('#' + this.iddatepicker)).datepicker(options);                 this.datepicker                     .on('changedate', (e: any) => {                         let newdate: date = e.date;                          if (isdate(this.date) && isdate(newdate)) {                             // hours/minutes                             var h = this.date.gethours();                             var m = this.date.getminutes();                             newdate.sethours(h);                             newdate.setminutes(m);                         }                          this.date = newdate;                         this.datechange.emit(newdate);                     });             } else if (this.datepickeroptions === false) {                 (<any>jquery('#' + this.iddatepicker)).remove();             }              if (!this.timepicker && this.timepickeroptions !== false) {                 let options = jquery.extend({ defaulttime: false }, this.timepickeroptions);                 this.timepicker = (<any>jquery('#' + this.idtimepicker)).timepicker(options);                 this.timepicker                     .on('changetime.timepicker', (e: timepickerevent) => {                         let { meridian, hours } = e.time;                          if (meridian) {                             // has meridian -> convert 12 24h                             if (meridian === 'pm' && hours < 12) {                                 hours = hours + 12;                             }                             if (meridian === 'am' && hours === 12) {                                 hours = hours - 12;                             }                             hours = parseint(this.pad(hours));                         }                          if (!isdate(this.date)) {                             this.date = new date();                             this.updatedatepicker(this.date);                         }                          this.date.sethours(hours);                         this.date.setminutes(e.time.minutes);                         this.datechange.emit(this.date);                     });             } else if (this.timepickeroptions === false) {                 (<any>jquery('#' + this.idtimepicker)).parent().remove();             }         }          private updatemodel(date: date): void {             this.updatedatepicker(date);              // update timepicker             if (this.timepicker !== undefined) {                 let hours = date.gethours();                 if (this.timepickeroptions.showmeridian) {                     // convert 24 12 hour system                     hours = (hours === 0 || hours === 12) ? 12 : hours % 12;                 }                 const meridian = date.gethours() >= 12 ? ' pm' : ' am';                 const time =                     this.pad(hours) + ':' +                     this.pad(this.date.getminutes()) +                     (this.timepickeroptions.showmeridian || this.timepickeroptions.showmeridian === undefined                         ? meridian : '');                 this.timepicker.timepicker('settime', time);                 this.timemodel = time; // fix initial empty timemodel bug             }         }          private updatedatepicker(value?: any) {             if (this.datepicker !== undefined) {                 this.datepicker.datepicker('update', value);             }         }          private pad(value: any): string {             return value.tostring().length < 2 ? '0' + value : value.tostring();         }     }      let id: number = 0;     function uniqueid(prefix: string): string {         return prefix + ++id;     }      function isdate(obj: any) {         return object.prototype.tostring.call(obj) === '[object date]';     } 

system.config.json 

/**  * system configuration angular 2 samples  * adjust necessary application needs.  */ (function (global) {   system.config({     paths: {       // paths serve alias       'npm:': 'node_modules/'     },     // map tells system loader things     map: {       moment:'node_modules/moment/moment.js',       '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',        'mydatepicker' :'npm:mydatepicker',         'ng2-datetime': "npm:ng2-datetime",       // our app within app folder       app: 'app',       // angular bundles       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',       // other libraries       'rxjs':                       'npm:rxjs',       'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',     },     // packages tells system loader how load when no filename and/or no extension     packages: {       'ng2-datetime': {                 main: './ng2-datetime.js',                 defaultextension: 'js'             },       mydatepicker : {         main :'./index.js',         defaultextension:'js'       },       app: {         main: './main.js',         defaultextension: 'js'       },       rxjs: {         defaultextension: 'js'       },       'angular2-in-memory-web-api': {         main: './index.js',         defaultextension: 'js'       }     }   }); })(this); 

error console image

let import libs

import 'bootstrap/dist/css/bootstrap.css'; import 'jquery/dist/jquery.min.js'; import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css'; import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js'; import 'ng2-datetime/src/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css'; import 'ng2-datetime/src/vendor/bootstrap-timepicker/js/bootstrap-timepicker.js'; 

i'm using angular-seed, add above libs in project in config file please read more @ here