Shree29 Shree29 - 3 months ago 16
AngularJS Question

Want to implement jquery-ui-daterangepicker in Angular

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

Answer

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

  1. you forgot to put an empty array after you install the module app.module('publisher-portal',[])
  2. 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>

Comments