The air-datepicker functionality seems to be malfunctioning within an Angular 4 environment

When using static HTML, it's quite simple to integrate Air Datepicker by following the documentation available at :

<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>

However, implementing it with Angular 4 might not be as straightforward.

To start using air-datepicker with Angular 4:

npm i air-datepicker --save

In your component files, import the necessary scripts:

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

Despite importing the script, the input field might not work as expected:

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

If you attempt to add the JS file to ".angular-cli.json", it may still not function properly:

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

Answer №1

There is no need to import js files into components. Follow these steps to add air-picker or another jQuery plugin to your project

  1. First, install npm dependencies:

    npm install jquery air-datepicker --save
    
  2. Next, inform webpack which js and css files should be included in the 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"
      ]
    
  3. In the component method ngAfterViewInit(), initialize the plugin as follows:

    ($('#datepicker') as any).datepicker();

Note that you may need to manually initialize the plugin instead of using the class datepicker-here.

For guidance on using jQuery with Angular 2, refer to this resource

If you still have questions, feel free to reach out to me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to exclude an interface using a union type recursively in TypeScript?

I wish to recursively exclude types that are part of union types, and eliminate certain union types Here is an example. Normal and Admin should be considered as union types interface Admin { admin: never; } interface Normal { normal: never; } ...

Set the datepicker with the window positioned to the right side

In my current project, I am utilizing Angular 13, Bootstrap 5, and ngx-bootstrap-fix-datepicker version 5. "bootstrap": "^5.1.3", "ngx-bootstrap": "^8.0.0", "ngx-bootstrap-fix-datepicker": "^5.6.8" ...

How can you check the status of a user in a Guild using Discord JS?

Is there a way to retrieve the online status of any user in a guild where the bot is present? Although I can currently access the online status of the message author, I would like to be able to retrieve the online status of any user by using the following ...

Insert a blank row at the top of the grid in Wijmo for Angular 2

I am attempting to insert a new empty row at the start of the grid when an external button is clicked. The grid is displaying correctly. <wj-flex-grid #flex [itemsSource]="data" [isReadOnly]="true" [headersVisibility]="'Column' ...

Error: NPM link - Application unable to detect dependencies of the linked library in Angular

Currently, I am working on an application along with a library that is used within the application. The issue I am facing is related to updating the library using NPM link. It seems that when I import the library into the application, the required dependen ...

Changing the way in which text is selected and copied from a webpage with visible white space modifications

After working on developing an HTML parser and formatter, I have implemented a new feature that allows whitespace to be rendered visible by replacing spaces with middle dot (·) characters and adding arrows for tabs and newlines. https://i.sstatic.net/qW8 ...

The best approach to typing a FunctionComponent in React with typescript

I'm diving into the world of React and TypeScript for the first time. Could someone verify if this is the correct way to type a FunctionComponent? type ModalProps = { children: ReactElement<any>; show: boolean; modalClosed(): void; }; co ...

Using redux action in the onPaginationChange function instead of setPaginationState in the given example for the TanStack table - is there a way to

Provided this sample Is there a way to utilize by dispatching a redux action rather than using useState - setPaginationState? onPaginationChange: state => dispatch(browseItemModalActions.setPagination(state)) An error is appearing in the console: ...

Performing bulk operations on all selected rows in a table using Angular 6

Within my Angular 6 web application, there is a table with checkboxes in each row. My goal is to be able to perform bulk actions on the selected rows, such as deleting them. One approach I considered was adding an isSelected boolean property to the data m ...

The module "@angular/compiler-cli/ngcc" could not be located

When working with the following versions of Angular: I've encountered an issue when attempting to build my project using the npm run build command after switching laptops and installing a fresh copy of NodeJS and Angular. / \ _ __ __ _ ...

Why is the *.ngsummary.json file used?

I recently discovered AOT and ngc. When I run ngc, I notice numerous *.ngsummary.json files appearing in the src folder alongside the *.ts files. Can someone please explain their purpose? ...

Guide on disabling a hyperlink in a table column under specific conditions using Angular2

I am working with a table that has 4 columns: Name, id, Dept, City. The row data and column data are provided as an array from a typescript file and I am iterating through *ngFor to display the content. Below is a snippet of my code: <tbody> < ...

Having trouble compiling a Vue.js application with TypeScript project references?

I'm exploring the implementation of Typescript project references to develop a Vue application within a monorepo. The current structure of my projects is outlined below: client/ package.json tsconfig.json src/ ... server/ package.json t ...

Effective Strategies for Managing Real-Time Messaging in a MEAN Stack Application

I'm looking to create a MEAN Stack application, but I'm struggling to find clear guidance on how to implement live messaging similar to applications like WhatsApp or Facebook Messenger. At first, I considered using the setTimeout function and ma ...

Utilizing ConcatMap in conjunction with an internal loop

I am having a coding issue where I need certain requests to run sequentially, but some of the responses are observables. The data is mainly retrieved except for two requests that need to be executed in a loop for each account. I am using concatMap and fork ...

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

After installing the npm module, I encountered a problem while using node.js version 14.17.6. I am a beginner in Angular and struggling to find a solution due to not using the latest Angular CLI version. Any help would be greatly appreciated. Thank you in ...

The 'path' property is not found on the 'ValidationError' type when using express-validator version 7.0.1

When utilizing express-validator 7.0.1, I encounter an issue trying to access the path field. The error message indicates that "Property 'path' does not exist on type 'ValidationError'.: import express, { Request, Response } from " ...

Transforming an Angular formgroup into an object with fewer parameters

I have developed a form in Angular that is functioning perfectly. Now, I am trying to map the form data to a newCustomer object. However, there seems to be an issue with casting the form as the newCustomer object does not have a checkbox field like the for ...

Unable to log out of OIDC-client due to an error: end session endpoint not found

Currently, I am in the process of setting up a code flow with Auth0 as my chosen identity provider. Successfully, the sign-in process functions well and I receive a valid token from Auth0. However, I am encountering an issue when attempting to sign out ...