How to import and use a package installed via NPM

Question

I installed 'daterangepicker' using following commands:

npm install daterangepicker
npm install @types/daterangepicker

and then tried to import it and use like that:

import { DateRangePicker } from 'daterangepicker';

const picker = new DateRangePicker('#date-picker', {
  startDate: '01/01/2022',
  endDate: '01/31/2022'
});

but it gives me the following error:

'DateRangePicker' only reffers to a type, but is being used as a value here

in their documentation they are using jQuery to call it but I wonder if I can import it and use in .ts file somehow? http://www.daterangepicker.com/

Try using const DateRangePicker = require('daterangepicker'); — Ole Nor, Apr 02 '23 at 18:53
Do you have a package json, if so, you can add "type": "module", — Alkari, Apr 02 '23 at 19:33
It looks like this is just a jQuery plugin, so you can't use it without jQuery, I might be wrong though. I wasn't able to find anything on that website about use without jQuery or using it with `new` — Samathingamajig, Apr 02 '23 at 19:44

score 0 · Answer 1 · answered Jun 06 '23 at 18:46

It is bit late, but you can use it in typescript with making some changes in project.

First you need to install daterangepicker ( you have already install it)

npm install daterangepicker

then make class DateRangePickerDirective in any folder based on your project structure

import {Directive, ElementRef, OnInit, Input, Output, EventEmitter} from '@angular/core';

  @Directive({
    selector: '[daterangepicker]'
  })

  export class DateRangePickerDirective implements OnInit {
    @Input() options: Object = {};
    @Output() selected: any = new EventEmitter();

    constructor(private elementRef: ElementRef) {}

    ngOnInit() {
      $(this.elementRef.nativeElement)
        .daterangepicker(this.options, this.dateCallback.bind(this));
    }

    dateCallback(start:any, end:any, label:any) {
      let message = 
        [start.format('YYYY-MM-DD') ,end.format('YYYY-MM-DD')]
      
      ;
      this.selected.emit(message);
    }
  }

make file name typings.d.ts in src (or any other folder which is root folder for all ts implementation) and add below code in it

interface JQuery{
  daterangepicker(options?: Object, callback?: Function): any;
}

So it will make daterangepicker type to JQuery.

also we need moment and jquery npm package

npm install jquery
npm install moment

add style and scripts in angular.json file if used in angular project

"styles": [
          ---other styles files-------
          "node_modules/daterangepicker/daterangepicker.css"
        ],

"scripts": [
          ---other js files---
          "./node_modules/jquery/dist/jquery.min.js",
          "node_modules/moment/moment.js",
          "node_modules/daterangepicker/daterangepicker.js"
        ],

as daterangepicker has moment and jquery depenedency, we have to follow exact order, so first it loads jquery, then moment and finally when it loads daterangepicker then it doesn't break any where. Also if you have already run project and adding in this file, then you have to start npm process again because it is not working when project is already running.

finally add below line in html file

 <input value="" daterangepicker name="start"
                            (selected)="dateSelected($event)"
                            [options]="pickerOptions"
                            class="form-control"/>

add DateRangePickerDirective in NgModule declarations

 @NgModule({
  declarations: [OtherModuleComponent,DateRangePickerDirective],
  imports: [CommonModule, NgxPaginationModule, RouterModule.forChild(routes)],
  exports: [RouterModule],
})

In .ts file add below code

//import $ as it is not working without importing it and give error on build
import * as $ from "jquery";

pickerOptions: Object = {
 'showDropdowns': true,
 'showWeekNumbers': true,
 'timePickerIncrement': 5,
 'autoApply': true,
 // 'startDate': '05/28/2016',
 // 'endDate': '06/03/2016'
};



dateSelected(message:any) {
  let [startDate,endDate] = message;
  console.log(startDate);
  console.log(endDate);
  //perform operations which you have to perform
}

For detail information this whole project will be very helpful.

score -1 · Answer 2 · answered Apr 02 '23 at 19:38

-1

Try using

    const DateRangePicker = require('daterangepicker');

By using require instead of import, we can access the default export of the daterangepicker module as a value that can be instantiated with new.

answered Apr 02 '23 at 19:38

Ole Nor

135
8

Zze · Answer 3 · 2023-04-02T20:23:10.640

This is an old javascript module that isn't configured / setup for ES module import.

You can use this syntax to import and use it:

import * as DateRangePickerImport from 'daterangepicker';
var DateRangePicker = (DateRangePickerImport as any).default;

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

Or you can do as suggested in the comments and use require by importing @types/node and then:

var DateRangePicker = require('daterangepicker');

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

Or you can set "esModuleInterop": true in your tsconfig and then:

import DateRangePicker from 'daterangepicker';

const picker = new DateRangePicker(document.getElementById(''), {
  startDate: '01/01/2022',
  endDate: '01/31/2022',
});

https://www.typescriptlang.org/docs/handbook/modules.html

How to import and use a package installed via NPM

3 Answers3