jQuery datetimepicker aux champs dynamiques

Question

avec angulaire je clone mes champs comme celui-ci

$scope.edu_rows = [0]; 
var edu_counter = 0; 

$scope.cloneEduRow = function() { 
    edu_counter++; 

    if ($scope.edu_rows.length === 10) 
     alert('Entry limit reached!'); 
    else { 
     $scope.edu_rows.push(edu_counter); 
    } 

}; 

$scope.removeEduRow = function (rowIndex) { 
    $scope.edu_rows.splice(rowIndex, 1); 
}; 

par un ng répétition

<div data-ng-repeat="row in edu_rows"> 
         <div class="col-md-15 form-group row"> 
          <div class="col-sm-3"> 
           <input type="text" class="form-control" name="edu[@{{ $index }}][school]" 
             placeholder="School"> 
          </div> 
          <div class="col-sm-4"> 
           <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]" 
             placeholder="Teaching"> 
          </div> 
          <div class="col-md-2"> 
           <div class="input-group date"> 
            <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]" 
              placeholder="Start Date"> 
            <span class="input-group-addon"> 
             <span class="fa fa-calendar"></span> 
            </span> 
           </div> 
          </div> 
          <div class="col-md-2"> 
           <div class="input-group date"> 
            <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]" 
              placeholder="End Date"> 
            <span class="input-group-addon"> 
             <span class="fa fa-calendar"></span> 
            </span> 
           </div> 
          </div> 
          <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)"> 
           <i class="fa fa-remove"></i> 
          </a> 
         </div> 
        </div> 

au fond de moi j'iniate datetimepicker

$(".date").datetimepicker({ 
     viewMode: 'years', 
     format: 'MM/YYYY', 
     icons: { 
      time:  'fa fa-clock-o', 
      date:  'fa fa-calendar', 
      up:  'fa fa-chevron-up', 
      down:  'fa fa-chevron-down', 
      previous: 'fa fa-chevron-left', 
      next:  'fa fa-chevron-right', 
      today: 'fa fa-screenshot', 
      clear: 'fa fa-trash', 
      close: 'fa fa-remove' 
     } 
    }); 

mais cela ne fonctionne que pour la première rangée, les lignes ajoutées ne reçoivent pas le plugin, j'ai essayé d'utiliser le focus: $(document).on("focus", ".date", function() {

mais cela n'a pas fonctionné, en le mettant dans mon contrôleur angulaire travaille un peu, il l'iniates pour la ligne ajoutée précédente après avoir appuyé sur le bouton, mais pas pour la ligne actuellement ajoutée.

Aide appréciée.

Answer 1

Cet exemple de travail vous aidera à résoudre votre problème.

var app = angular.module('app1', []); 
 

 
    app.controller('MainCtrl', function ($scope, $timeout) { 
 
     $scope.edu_rows = [0]; 
 
     var edu_counter = 0; 
 

 
     $scope.cloneEduRow = function() { 
 
      edu_counter++; 
 

 
      if ($scope.edu_rows.length === 10) 
 
       alert('Entry limit reached!'); 
 
      else { 
 
       $scope.edu_rows.push(edu_counter); 
 
      } 
 
      $scope.bindDataTimePicker(); 
 
     }; 
 

 
     $scope.removeEduRow = function (rowIndex) { 
 
      $scope.edu_rows.splice(rowIndex, 1); 
 
     }; 
 

 
     $scope.bindDataTimePicker = function() { 
 
      $timeout(function() { 
 
       $(".date").datetimepicker({ 
 
        viewMode: 'years', 
 
        format: 'MM/YYYY', 
 
        icons: { 
 
         time: 'fa fa-clock-o', 
 
         date: 'fa fa-calendar', 
 
         up: 'fa fa-chevron-up', 
 
         down: 'fa fa-chevron-down', 
 
         previous: 'fa fa-chevron-left', 
 
         next: 'fa fa-chevron-right', 
 
         today: 'fa fa-screenshot', 
 
         clear: 'fa fa-trash', 
 
         close: 'fa fa-remove' 
 
        } 
 
       }); 
 
      }, 100); 
 
     } 
 
     $scope.bindDataTimePicker(); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 
<div ng-app="app1" ng-controller="MainCtrl"> 
 
    <div data-ng-repeat="row in edu_rows"> 
 
     <div class="col-md-15 form-group row"> 
 
      <div class="col-sm-3"> 
 
       <input type="text" class="form-control" name="edu[@{{ $index }}][school]" 
 
         placeholder="School"> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]" 
 
         placeholder="Teaching"> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <div class="input-group date"> 
 
        <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]" 
 
          placeholder="Start Date"> 
 
        <span class="input-group-addon"> 
 
         <span class="fa fa-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-2"> 
 
       <div class="input-group date"> 
 
        <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]" 
 
          placeholder="End Date"> 
 
        <span class="input-group-addon"> 
 
         <span class="fa fa-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
      <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)"> 
 
       <i class="fa fa-remove"></i> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <button ng-click="cloneEduRow()">Add New</button> 
 
</div>

Answer 2

Vous pouvez créer directive en vous xyz.js comme ceci:

app.directive("date", function() { 
function link(scope, element, attrs, controller) { 
    // CALL THE "datetimepicker()" METHOD USING THE "element" OBJECT. 

    element.datetimepicker({ 
     format: 'DD-MM-YYYY', // here your need format is used i am just put here 
     icons: { 
      time: "fa fa-clock-o", 
      date: "fa fa-calendar", 
      up: "fa fa-chevron-up", 
      down: "fa fa-chevron-down", 
      previous: 'fa fa-chevron-left', 
      next: 'fa fa-chevron-right', 
      today: 'fa fa-screenshot', 
      clear: 'fa fa-trash', 
      close: 'fa fa-remove' 
     } 
    }).on('dp.change', function (e) { 
     var d = new Date(e.date); 
     var day = d.getDate(); 
     var month = d.getMonth() + 1; 
     var year = d.getFullYear(); 
     scope.$apply(function() { 
      controller.$setViewValue(day + '-' + month + '-' + year); 
     }); 
    }); 
} 

return { 
    require: 'ngModel', 
    link: link 
}; 
}); 

et juste « date » est de donner à la boîte de texte comme celui-ci:

<div class="col-md-2"> 
          <div class="input-group"> 
           <input type="text" date class="form-control" name="edu[@{{ $index }}][start_date]" 
             placeholder="Start Date"> 
           <span class="input-group-addon"> 
            <span class="fa fa-calendar"></span> 
           </span> 
          </div> 
         </div>