Creating custom Moment.js plugins within an Ionic 2/Cordova project using TypeScript

In my Typescript Ionic 2 project, I am utilizing the moment.js library. To include it in my project, I use the following code snippet:

import * as moment from 'moment';

Once imported, I can use moment in my component like so:

let endDate = moment(data.endDate);

Now, I want to incorporate a plugin specific to moment.js - moment-weekday-calc from this repository: https://github.com/andruhon/moment-weekday-calc

I have installed the plugin via npm, but I'm encountering difficulties in making it work. I've attempted:

import * as moment from 'moment';
import 'moment-weekday-calc';

//(...) - section of my component's code

  let test = moment().isoWeekdayCalc({
    rangeStart: '1 Apr 2015',
    rangeEnd: '31 Mar 2016',
    weekdays: [1,2,3,4,5],
    exclusions: ['6 Apr 2015','7 Apr 2015'],
    inclusions: ['10 Apr 2015']
  }); //260

The above code is throwing an error:

Typescript Error
Property 'isoWeekdayCalc' does not exist on type 'Moment'.

Do you have any suggestions on how I can successfully integrate this plugin into my Ionic/Cordova Typescript application?

Answer №1

Regarding the issue mentioned, TypeScript is simply flagging an error about isoWeekdayCalc not being defined in the type definition of moment. The quick fix for this is to cast it to any, like so:

let testing = (<any>moment()).isoWeekdayCalc({
            rangeStart: '1 Apr 2015',
            rangeEnd: '31 Mar 2016',
            weekdays: [1,2,3,4,5],
            exclusions: ['6 Apr 2015','7 Apr 2015'],
            inclusions: ['10 Apr 2015']
        }); //260

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

I'm having trouble linking MikroORM migration to Postgresql - the npx command keeps failing. Can anyone offer some guidance on what

I am encountering a situation similar to the one described in this post. I'm following Ben Awad's YouTube tutorial: you can see where I am in the tutorial here. Objective: My goal is to execute npx mikro-orm migration:create in order to generate ...

Trigger a response according to the information received from the preceding action

I'm facing an issue with dispatching actions in sequence after the completion of the previous one. My goal is to dispatch an action (let's call it getDetails), use the data from this action to dispatch another action (getUserLists), and finally ...

I am puzzled as to why I keep receiving the error message "Cannot read property 'poPanel' of undefined"

CSS In my project, I am implementing a feature that displays an ordered list by looping through an array of objects and adding them on a button click. It works smoothly for adding items, but when I try to implement a remove function to delete each item, I ...

Angular uploading image via WCF service call

I have been facing an issue while trying to upload an image from my Angular frontend through wcf. The upload process is successful and I receive a success message, however, the saved image is not viewable in any image viewer or program. The code snippet u ...

How can RxJS be used to handle only the first value returned when calling multiple URLs?

I am faced with the challenge of having multiple URLs containing crucial information. My goal is to find a specific ID within these URLs, but I do not know which URL holds the necessary details. The approach I'm taking involves calling each URL and us ...

What is the proper way to integrate plotly types in Angular using a local version?

After exploring various plotly packages, I discovered that the angular-plotly package is no longer being updated. To incorporate the plotly library into my project, I decided to download the plotly.min.js file and include it in my sources. Additionally, I ...

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

I have implemented a strict version of TypeScript and ESLint in my project. The code for this portal was originally sourced from the documentation available here: After making some modifications, the code now looks like this: import React, { useEffect, u ...

What is the ideal method to manage API post requests in Angular?

I have a requirement to search for a document based on its name property by providing a string input from my Angular application. This involves calling a REST API endpoint with a function that resembles the following code snippet: exports.idea_search = f ...

Utilizing Angular 2's pipe functionality with dynamic parameters

Currently I am diving into Angular2/Ionic2 and trying to grasp the concept of Pipes. Everything was going smoothly until I faced a roadblock in the form of a specific problem related to temperatures. Let me illustrate my issue with an example involving te ...

What is the proper way to utilize a custom property that has been incorporated into my Pinia stores in a Typescript project?

Currently utilizing Vue 3 alongside Pinia; my api service is utilized for making requests to the api. I have included it as a property to ensure availability across all stores: In my main.ts file: import { http } from "@/services/http"; const s ...

How can I bind Angular to the selection of a file input field?

I am facing an issue with my upload form where the displayed filename is showing a virtual filepath instead of just the filename itself. How can I improve the binding to only display the filename (like selected.files[0].name) without any virtual path? My ...

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

Utilizing ngrx/store in Angular 2 for Search Functionality

In the process of enhancing an angular 4 application, I am working on integrating a search functionality for a data-filled table. The application also utilizes ngrx store to manage state. I am looking for advice on the most effective approach to implemen ...

Applying REGEX on input text in React Native

I'm having trouble getting my regex function to work correctly, so I believe there might be an error in my code. Any assistance would be greatly appreciated. Here is the regex function I am using: let validatePlate = (plate) => { var re = /(^[A ...

The selector isn't pulling up the item, even though it's clearly stored in the redux state

For some reason, my second selector is not working. I have double-checked and everything seems to be the same as for another object. When I look at the redux tool, all my objects exist. // problematic selector this.myActivityLike$ = this.store$.pipe( se ...

Choose Angular Material to dynamically display the state of multiple items as either checked or unchecked

Currently, I am utilizing <mat-select> from Angular Material for multiple choice selection. Is there a particular property that can be set for <mat-option> to determine whether an option should be checked or unchecked based on a parameter? For ...

Improve the efficiency of importing Bootstrap SCSS files

I am working on an Angular4 CLI project with Universal SSR. Within my own SCSS file, I am importing Bootstrap like so: @import '../node_modules/bootstrap/scss/bootstrap'; Bootstrap itself imports numerous other SCSS files, such as: @import "tr ...

Upgrading my loop React component from vanilla JavaScript to TypeScript for improved efficiency and functionality

After seeking assistance from Stack Overflow, I successfully created a loop in React using a functional component that works as intended. However, I am encountering errors while trying to refactor the loop to TypeScript. The code for my DetailedProduct c ...

Troubleshooting: The canvas texture in Phaser 3's Update() function is not functioning

I've been attempting to transform this tutorial into Phaser 3: but have encountered an issue with the update() function not working. I also tried using the refresh() function, but that didn't solve the problem either. In my file a.ts, I have cre ...

Preventing event bubbling/propagation in custom events: a step-by-step guide

Incorporating a module-project from Github into my Angular project, I am able to resize the DOM elements that are displayed on top of a div functioning as a drawing board. To configure my initial rectangles, I am utilizing a combination of mouseDown - mou ...