1

While I created the following jQuery datetimepicker plugin wrapped in an Angular directive which works fine:

http://jsfiddle.net/edwardtanguay/x9oa0u6n/2 (one directive instance, WORKS)

I, of course, want this directive to be able to be called multiple times on a page, but even though I made the id a variable, the multiple controls don't work for some reason, I suspect it is because I need to make the dp.change parameter value dynamic as well but I am not sure exactly what it is referring to.

http://jsfiddle.net/x9oa0u6n/4 (two directive instances, DOES NOT WORK)

How can I get this directive to work independently multiple times on the page?

<script type="text/ng-template" id="templateCalendarPicker">
    <div class='input-group date datepicker_format' id="{{dpid}}" style="width:{{width}}px">
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>  
</script>

<div ng-controller="mainController">
    <div calendar-picker width="200" date="date1" dpid="d1"></div>
    <div>The first date is <b>{{date1}}</b>.</div>
</div>

<div ng-controller="mainController">
    <div calendar-picker width="200" date="date2" dpid="d2"></div>
    <div>The second date is <b>{{date2}}</b>.</div>
</div>

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01';
    $scope.date2 = '2015-09-30';
})
.directive('calendarPicker', function() {
    var controller = function ($scope) {
        var vm = this;
        $('#datepicker').datetimepicker({
            format:'YYYY-MM-DD',
            defaultDate: new Date($scope.date)
        });

        var elemId = '#'+$scope.dpid;
        console.log(elemId);

        $(document).on('dp.change', elemId, function (a) {
            var selected_date = moment(a.date._d).format('YYYY-MM-DD');
            $scope.date = selected_date;
            $scope.$apply();
        });

        $scope.$on('$destroy', function() {
            $('#datepicker').data("DateTimePicker").destroy();
        });        
    };

    return {
        restrict: 'A',
        scope: {
            date : '=',
            width : '@',
            dpid : '@'
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'templateCalendarPicker'
    };
});
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
  • place datetimepicker on element not on selector with `id`..Could you take a look at this http://stackoverflow.com/a/29194068/2435473 – Pankaj Parkar Sep 15 '15 at 10:38
  • Based on your plunker (http://plnkr.co/edit/sgjWuQNUc8xExgbgucC5), I set up a jsfiddle (http://jsfiddle.net/edwardtanguay/7wssszop/1) but it says `element.datetimepicker is not a function`, is there something else I need to add? – Edward Tanguay Sep 15 '15 at 12:37
  • 1
    You need to load jquery before the angularjs..take a look at here http://jsfiddle.net/mkn2tuae/ – Pankaj Parkar Sep 15 '15 at 12:46

1 Answers1

0
<div class="form-group" show-errors>
  <div class="input-group date">
         <div class="input-group-content">
           <input type="text" datefield name="StartDate" class="form-control" ng-model="startDate" readonly="readonly" style="cursor:pointer;" required>
    </div>
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  </div>
</div>

You could reuse the datefield directive which I used.

Angular Code

angular.module('ngApp').directive('datefield', function () {
        return {
            restrict: 'AC',
            link: function (scope, element, attrs) {
                element.datepicker({ autoclose: true, todayHighlight: true });
            }
        }
    });

Also you dont have to repeat the mainController twice you can encapsulate it to one and bring in the same behaviour my decorating with the directive any number of times.

rahul vattekadath
  • 71
  • 5
  • hmm, I tried to set this up, but why can't it recognize ".datepicker"? it can't recognize `.datetimepicker` either, what do I need to change here so it can recognize the jquery control at least? http://jsfiddle.net/edwardtanguay/4f5zjox0/2/ – Edward Tanguay Sep 15 '15 at 12:11
  • Edited your fiddle kindly check this http://jsfiddle.net/ovdhenae/ your references was in wrong order – rahul vattekadath Sep 15 '15 at 12:59