Want to implement jquery-ui-daterangepicker in Angular

Question

Hi Friend I want to use jquery ui datepicker plugin in my app I am using http://tamble.github.io/jquery-ui-daterangepicker/ this plugin and want same functionality without any change I have tried something like this code below

(function(){
angular.module('publisher-portal').directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            element.daterangepicker();
         }
    };
});
})();
<input id="e2" type="text" ng-model="mydate" dateRangePicker/>

Please suggest me some solution

did you consider to use github.com/fragaria/angular-daterangepicker — Zamboney
– Zamboney, Commented Mar 22, 2016 at 11:38
Yes but I want same interface like tamble.github.io/jquery-ui-daterangepicker this plugin — Shree29
– Shree29, Commented Mar 22, 2016 at 11:40
I already searched for all plugin of angular and jquery but tamble.github.io/jquery-ui-daterangepicker this is best suited Please help me to implement that plug in — Shree29
– Shree29, Commented Mar 22, 2016 at 11:48
what you did is good but know you will need to implement all of the event by yourself and this means a lot of work... — Zamboney
– Zamboney, Commented Mar 22, 2016 at 11:50

Zamboney · Accepted Answer · 2016-03-22 12:06:18Z

3

this is a working snippet (that a close look of how i'm making sure that the jQuery loaded before i call .daterangepiker

more few think you miss on the way

you forgot to put an empty array after you install the module app.module('publisher-portal',[])
you didn't warp the element in $() statement

(function($){
angular.module('publisher-portal',[]).directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            $(element).daterangepicker();
         }
    };
});
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.3.1/moment.min.js"></script>
<script src="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/assets/css/styles.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/prettify/prettify.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.css">
<div ng-app='publisher-portal'>

<input id="e2" type="text" ng-model="mydate" date-range-picker /> 
  </div>

answered Mar 22, 2016 at 12:06

Zamboney

2,00712 silver badges22 bronze badges

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

2 Comments

Shree29 Over a year ago

Thanks you :) for solution

Twisty Over a year ago

+1 - The links for the example was helpful to me in answering: stackoverflow.com/questions/54258201/…

Tawani · Accepted Answer · 2016-08-10 16:34:42Z

1

Check out this pure Angular (no jquery required) date range picker. https://github.com/tawani/taDateRangePicker

answered Aug 10, 2016 at 16:34

Tawani

11.3k23 gold badges84 silver badges109 bronze badges

Collectives™ on Stack Overflow

Want to implement jquery-ui-daterangepicker in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related