Third-party library in Angular 2 Typescript

Question

I'm trying to use a pickadate.js libary in my project.

What I've tried so far...

  ngAfterViewInit() {
    $('.datepicker').pickadate({
        format: 'mm/dd/yyyy',
        formatSubmit: 'mm/dd/yyyy',
        hiddenName: true
    });
  }

Gets the following error:

$(...).pickadate is not a function

I really don't want to write a td.ts for anything in my index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My Angular2 App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <link rel="stylesheet" href="/node_modules/pickadate/lib/themes/default.css">
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/app/assets/main.css">
  <!-- endinject -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"> </script>
    <!-- inject:js -->
  <script src="/node_modules/pickadate/lib/legacy.js"></script>
  <script src="/node_modules/pickadate/lib/picker.time.js"></script>
  <script src="/node_modules/pickadate/lib/picker.date.js"></script>
  <script src="/node_modules/pickadate/lib/picker.js"></script>
  <!-- endinject -->

</head>
<body>

...

Where did you add the jQuery import? Script tags in templates are dropped. There are also a few questions about datepicker in Angular2 already. Did you check if they provide the info you need? — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 1, 2016 at 15:16

Bryan · Accepted Answer · 2016-02-01 15:24:33Z

2

Make sure you have included the TSD (right click, save as...) for jQuery into your App Component:

/// <reference path="../path/to/jquery.d.ts" />

Then also download this typing and import as so:

/// <reference path="../path/to/pickadate.d.ts" />

Lastly, make sure jQuery and PickADate are imported into your HTML. If everything is right, your code should work.

answered Feb 1, 2016 at 15:24

Bryan

7731 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-02-01 15:18:29Z

2

You can't add the library script tag inside a components template. <script> tags in Angular2 templates are dropped.

answered Feb 1, 2016 at 15:18

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

user3369579 Over a year ago

ok the fault was that i called the picker not after my jquery.js thx

Collectives™ on Stack Overflow

Third-party library in Angular 2 Typescript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related