CODEWITHSUNDEEP
angularjsangularjs-directive
Sadeghbayan
Sadeghbayan

Reputation: 1163

Multi same directive effect on one of them

I wrote a directive for datepicker .i can't use it twice in one form .
here is the code : 

app.directive('dateP', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true
      });
    }
  }
});

Demo

Upvotes: 0

Views: 46

Answers (3)

Mukund Kumar
Mukund Kumar

Reputation: 23181

you keep both id same.use this code:

<div  class="container" ng-controller="mainCtrl">

        <div class="input-append">
            <input date-p
            id="datepicker1"
            class="input-small"
            type="text"
            ui-mask="99/99/9999"
            ng-model="$parent.dt"
            >
            <button id="datepicker1btn" class="btn" type="button" ng-click="showDatepicker()"><i class="icon-calendar">i</i></button>
        </div>
      <div class="input-append">
            <input date-p
            id="datepickerSecond"
            class="input-small"
            type="text"
            ui-mask="99/99/9999"
            ng-model="$parent.dt1"
            >
            <button id="datepickerSecond" class="btn" type="button" ng-click="showSecond()"><i class="icon-calendar">i</i></button>
        </div>  


</div>

**EDIT:**

Use this code for your second question(commented):

Html:

<div  class="container" ng-controller="mainCtrl">

        <div class="input-append">
            <input date-p
            id="datepicker1"
            class="input-small"
            type="text"
            ui-mask="99/99/9999"
            ng-model="$parent.dt"
            >
            <button  class="btn" type="button"><i class="icon-calendar">i</i></button>
        </div>
      <div class="input-append">
            <input date-p
            id="datepickerSecond"
            class="input-small"
            type="text"
            ui-mask="99/99/9999"
            ng-model="$parent.dt1" 
            >
            <button  class="btn" type="button" ><i class="icon-calendar">i</i></button>
        </div>  


</div>

JS:

var app = angular.module('app', ['ui.mask']);
app.directive('dateP', function() {
  return {
    restrict: 'A',
    require: 'ngModel',

    link: function(scope, element, attr, ngModel) {
      element.datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true
      });
      element.next().bind('click',function(){
         element.datepicker('show');
      })
    }
  } 
});

app.controller('mainCtrl', function($scope) {

  $scope.dt;
$scope.dt1;

});

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

Only removing the id's would work, if you want you could give the same class to all input fields.

<div class="input-append">
  <input date-p class="input-small datepicker" type="text" ui-mask="99/99/9999" ng-model="$parent.dt">
  <button class="btn" type="button" ng-click="showDatepicker()"><i class="icon-calendar">i</i>
  </button>
</div>
<div class="input-append">
  <input date-p class="input-small datepicker" type="text" ui-mask="99/99/9999" ng-model="$parent.dt1">
  <button class="btn" type="button" ng-click="showSecond()"><i class="icon-calendar">i</i>
  </button>
</div>

Working Plunkr

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691625

Your two inputs have the same ID. An ID is supposed to be unique. Give them a different ID.

Upvotes: 1

Related Questions