How to use jQuery UI DateRangePicker in angular4?

Question

I have seen the demo of the jQuery UI DateRangePicker but I did not find out how to use in angular4 because there is no package of jQuery UI DateRangePicker in angular2. Please tell us how to use in angular4. I have use angular version is:- 4.3.3

why not you are using primeng's calendar here primefaces.org/primeng/#/calendar — Pardeep Jain
– Pardeep Jain, Commented Sep 4, 2017 at 12:15

Anirudha Gupta · Accepted Answer · 2017-09-04 11:47:10Z

0

You can download the jQuery Ui from NPM, check this link https://www.npmjs.com/package/jquery-ui you can download the ui picker js file and can use them from the project directory. check this answer to add the js file into your view https://stackoverflow.com/a/41899261/713789

answered Sep 4, 2017 at 11:47

Anirudha Gupta

9,3579 gold badges58 silver badges84 bronze badges

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

4 Comments

Harleen Kaur Arora Over a year ago

I have told us Jquery ui dateRangePicker only not all jquery ui.

Anirudha Gupta Over a year ago

@HarleenKaurArora you can download jQuery UI from here jqueryui.com/download (the parts you need) and you can load the js file that you only need in your view.

Harleen Kaur Arora Over a year ago

there is no module for this plugin.

Anirudha Gupta Over a year ago

de-select all and check only this jqueryui.com/download/#widgets/datepicker

Pardeep Jain · Accepted Answer · 2017-09-04 13:01:47Z

Yes, as per documentation there is no npm package to use this dateRangePicker in your angular2 app, so if you want to use this in your project do complete the following steps.

Install all dependencies manually and list down all in the .angular-cli.json file in your app accordingly.

  <link href="jquery-ui.min.css" rel="stylesheet">
  <link href="jquery.comiseo.daterangepicker.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="moment.min.js"></script>
  <script src="jquery.comiseo.daterangepicker.js"></script>

On the top of component insert this lineHeight
```
declare var $: any;
```

In your component's constructor call this method

$(function() { $("#e1").daterangepicker(); });

PS: Replace id with your ID name.

Collectives™ on Stack Overflow

How to use jQuery UI DateRangePicker in angular4?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related