Angular 2: this.dpElement.datetimepicker is not a function

[jsutStacy]

Hi,

Followed tutorial in README file, but when loading my app I have this error. I googled but no advice helped.

core.es5.js?0445:1223 ERROR TypeError: this.dpElement.datetimepicker is not a function at DateTimePickerDirective.ngOnInit (eval at 635 (app.js:796), :75:24) at checkAndUpdateDirectiveInline (eval at (vendor.js:20), :11037:19) at checkAndUpdateNodeInline (eval at (vendor.js:20), :12533:17) at checkAndUpdateNode (eval at (vendor.js:20), :12472:16) at prodCheckAndUpdateNode (eval at (vendor.js:20), :13166:5) at Object.eval [as updateDirectives] (VisitorsComponent.ngfactory.js:2107) at Object.updateDirectives (eval at (vendor.js:20), :12923:72) at checkAndUpdateView (eval at (vendor.js:20), :12439:14) at callViewAction (eval at (vendor.js:20), :12804:21) at execComponentViewsAction (eval at (vendor.js:20), :12736:13) at checkAndUpdateView (eval at (vendor.js:20), :12445:5) at callViewAction (eval at (vendor.js:20), :12804:21) at execEmbeddedViewsAction (eval at (vendor.js:20), :12762:17) at checkAndUpdateView (eval at (vendor.js:20), :12440:5) at callViewAction (eval at (vendor.js:20), :12804:21)

[fetrarij]

Hello, how's your html? do you have input-group ?

[jsutStacy]

      <div>
        <div class="row">
          <div class="col-md-3">
            <label>Input element:</label>
            <div class="form-group">
              <div class="input-group">
                <input class="form-control"
                       a2e-datetimepicker
                       [options]="a2eOptions"
                       (onChange)="dateChange($event)"
                       (onClick)="dateClick()"
                />
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
              </div>
            </div>
          </div>

        </div>
      </div>

[fetrarij]

@Nasty94 Could you give more info of your env? do you use angular cli or which one? did you aready included jquery and eonasdan bootstrap files?

[jsutStacy]

I use angular cli and yes, I have included jquery and eonasdan bootstrap files.

"ng2-eonasdan-datetimepicker": "^0.0.9",
"jquery": "^3.3.1",

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"

  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/moment/moment.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
  ],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

[fetrarij]

@Nasty94 could you do some update to have the 0.1.0 version instead of 0.0.9 ?

[jsutStacy]

sure, i did: npm install ng2-eonasdan-datetimepicker@0.1.0 -save

"ng2-eonasdan-datetimepicker": "^0.1.0",

but still have same problem and actually it went worse:

ERROR TypeError: this.dpElement.datetimepicker is not a function at DateTimePickerDirective.ngOnInit (eval at 358 (app.js:309), :75:24) at checkAndUpdateDirectiveInline (eval at (vendor.js:20), :11037:19) at checkAndUpdateNodeInline (eval at (vendor.js:20), :12533:17) at checkAndUpdateNode (eval at (vendor.js:20), :12472:16) at prodCheckAndUpdateNode (eval at (vendor.js:20), :13166:5) at Object.eval [as updateDirectives] (VisitorsComponent.ngfactory.js:2107) at Object.updateDirectives (eval at (vendor.js:20), :12923:72) at checkAndUpdateView (eval at (vendor.js:20), :12439:14) at callViewAction (eval at (vendor.js:20), :12804:21) at execComponentViewsAction (eval at (vendor.js:20), :12736:13) at checkAndUpdateView (eval at (vendor.js:20), :12445:5) at callViewAction (eval at (vendor.js:20), :12804:21) at execEmbeddedViewsAction (eval at (vendor.js:20), :12762:17) at checkAndUpdateView (eval at (vendor.js:20), :12440:5) at callViewAction (eval at (vendor.js:20), :12804:21) defaultErrorLogger @ core.es5.js?0445:1223 15core.es5.js?0445:1223 ERROR TypeError: Cannot read property 'diff' of undefined at DateTimePickerDirective.ngDoCheck (eval at 358 (app.js:309), :89:46) at checkAndUpdateDirectiveInline (eval at (vendor.js:20), :11040:19) at checkAndUpdateNodeInline (eval at (vendor.js:20), :12533:17) at checkAndUpdateNode (eval at (vendor.js:20), :12472:16) at prodCheckAndUpdateNode (eval at (vendor.js:20), :13166:5) at Object.eval [as updateDirectives] (VisitorsComponent.ngfactory.js:2107) at Object.updateDirectives (eval at (vendor.js:20), :12923:72) at checkAndUpdateView (eval at (vendor.js:20), :12439:14) at callViewAction (eval at (vendor.js:20), :12804:21) at execComponentViewsAction (eval at (vendor.js:20), :12736:13) at checkAndUpdateView (eval at (vendor.js:20), :12445:5) at callViewAction (eval at (vendor.js:20), :12804:21) at execEmbeddedViewsAction (eval at (vendor.js:20), :12762:17) at checkAndUpdateView (eval at (vendor.js:20), :12440:5) at callViewAction (eval at (vendor.js:20), :12804:21) defaultErrorLogger @ core.es5.js?0445:1223

[jsutStacy]

I actually tried both angular-cli and webpack configurations but both give me same error

[fetrarij]

it seems like eonasdan-bootstrap-datetimepicker is not loaded with the jquery you use.

could you try to use only:

    "scripts": [
          "../node_modules/tether/dist/js/tether.min.js",
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js",
          "../node_modules/moment/moment.js",
          "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
      ],

and remove package-lock.json and node_modules/ , then npm install .

if it doesnt work, provide your full package.json

[jsutStacy]

it did not work. package.json:

{ "name": "", "version": "2.1.0", "license": "MIT", "scripts": { "start": "npm install --allow-root | webpack-dev-server --progress --port 3000", "build": "rimraf dist && webpack --config ./config/webpack.prod.js --progress --profile --bail", "test": "echo \"Error: no test specified\" && exit 1" }, "private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/cdk": "^2.0.0-beta.8", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/material-moment-adapter": "^5.2.5", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "angular-load": "^0.5.0", "angular-moment": "^1.2.0", "angular2-datatable": "^0.6.0", "angular2-datetimepicker": "^1.1.1", "angular2-debounce": "^1.0.4", "angular2-http": "^1.2.0", "angular2-infinite-scroll": "^0.3.5", "angular2-jwt": "^0.2.3", "angular2-moment": "^1.8.0", "angular2-notifications": "^0.7.8", "angular2-select2": "^1.0.0", "bootstrap": "^3.3.0", "browser-sync": "^2.18.13", "components-font-awesome": "^5.0.6", "core-js": "^2.4.1", "file-loader": "^0.11.2", "file-saver": "^1.3.3", "font-awesome-sass-loader": "^2.0.1", "jquery": "^3.3.1", "jquery-slimscroll": "^1.3.8", "jsdom": "^11.1.0", "less": "^2.7.2", "metismenu": "^2.7.0", "moment": "^2.22.1", "mydaterangepicker": "^4.2.0", "native-promise-only": "^0.8.1", "ng2-auto-complete": "^0.12.0", "ng2-eonasdan-datetimepicker": "^0.1.0", "ng2-select": "^1.2.0", "ng2-select2": "^1.0.0-beta.10", "ngx-bootstrap": "^2.0.0-rc.0", "ngx-dropdown": "0.0.22", "ngx-pagination": "^3.0.3", "ngx-resource": "^3.2.7", "node.extend": "^2.0.0", "rimraf": "^2.6.1", "rxjs": "^5.1.0", "tether": "^1.4.3", "ts-loader": "^2.3.2", "url-loader": "^0.5.9", "xlsx": "^0.11.3", "zone.js": "^0.7.4" }, "devDependencies": { "@angular/cli": "1.2.1", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "angular2-template-loader": "^0.6.2", "awesome-typescript-loader": "^3.2.2", "codelyzer": "~3.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^2.1.2", "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "merge-webpack-plugin": "^0.1.1", "popper.js": "^1.14.3", "protractor": "~5.1.2", "rimraf": "^2.6.1", "script-loader": "^0.7.2", "style-loader": "^0.18.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3", "webpack": "^2.1.0-beta.22", "webpack-dev-server": "^2.1.0-beta.9" } }

[fetrarij]

with your package.json, I see all your version, I tried with and there should be fine. Did you redefined jquery? could you minimize your code (with error) and share with me .

[jsutStacy]

please find the small version in .zip. navigate in terminal to the folder "test" and do "npm start" then in browser open

[fetrarij]

@Nasty94

• if I use webpack (npm start) there are error, related with the select2:

ERROR in [at-loader] ./node_modules/@types/select2/index.d.ts:113:20 TS2702: 'JQuery' only refers to a type, but is being used as a namespace here.

but after removing the node_modules/@types/select2 , I have it working and got your main error.

I already knew there are jquery conflict so why the datetimepicker function is not loaded. I tried to remove theses lines in webpack.common.js

    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery'
    }),

and I got it working.

• if I use angular cli (ng serve) , there are little error about hw you imported moment in datex.pipe.ts , should only: import * as moment from 'moment'; after fixing it I have your datepicker working:

[jsutStacy]

it worked! thank you!

[jsutStacy]

.