Question

我为datepicker编写了一个指令.i不能在一种形式中使用它两次这是代码：

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

Demo

Answer 1

您的两个输入具有相同的ID。 ID应该是唯一的。给他们一个不同的身份证。

Answer 2

你保持两个id相同。使用此代码：

<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:**

将此代码用于第二个问题（已评论）：

<强> 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;

});

Answer 3

如果您希望自己可以为所有输入字段提供相同的类，则只删除ID会起作用。

<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

对其中一个具有多个相同的指令效果

3 个答案: