air-datepicker not work in angular 4

Question

With static html it easy to use (http://t1m0n.name/air-datepicker/docs/):

<html>
    <head>
        <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
        <script src="dist/js/datepicker.min.js"></script>

        <!-- Include English language -->
        <script src="dist/js/i18n/datepicker.en.js"></script>
    </head>
</html>

But I don`t know how to use it with angular 4.

Install air-datepicker with

npm i air-datepicker --save

In component write

import 'jquery/dist/jquery.min.js';
import 'air-datepicker/dist/js/datepicker.js';

But input not use it

<input type='text' class="datepicker-here" data-position="right top" />

If add this js file to ".angular-cli.json" It not work

"scripts": [
    "../node_modules/air-datepicker/dist/js/datepicker.js"

score 0 · Answer 1 · answered Jul 25 '17 at 09:57

You do not need to import js files to components. Steps for add air-picker or other jquery plugin to your project

Install npm dependencies

npm install jquery air-datepicker --save

Let know to webpack what js and css should be added to bundle (.angular-cli file)

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/air-datepicker/dist/js/datepicker.js",
    "../node_modules/air-datepicker/dist/js/i18n/datepicker.en.js"
  ]

  "styles": [
    "styles.scss",
    "../node_modules/air-datepicker/dist/css/datepicker.min.css"
  ]

In component method ngAfterViewInit() initialize the plugin
($('#datepicker') as any).datepicker();

Seems you cannot initialize plugin with class datepicker-here, you should use manual initialization.

How to use jquery with angular 2 you could see here

If it`s not clear, you could contact me

air-datepicker not work in angular 4

1 Answers1