récupération date datepicker angular

Par zikou23, il y a 10 ans

Javascript

Bonjour,
je voudrai récupérer la valeur des 2 champs datepicker, j'utilise angular 1.4.

app.directive('datepicker',function(){ return { restrict : 'A', link : function(scope, element, attrs){ $(element).datepicker( { autoclose: true, format: "dd/mm/yyyy", todayHighlight: true, } ); } } }); app.controller("repportingController",function($scope, searchFactory, $http, $q){ $scope.customers = searchFactory.get_all_customers(); $scope.repports = null; $scope.showRepport = false; $scope.repporting = {}; $scope.repport = function(){ $scope.showRepport = true; $http.post("/admin/repporting/repport",$scope.repporting).success(function(e){ $scope.count = e.length +" Customers found"; $scope.repports = e; }); } });

voici le template

<div class="center-block"> <input type="text" datepicker ng-model="repporting.date1"/> <span > - </span> <input type="text" datepicker ng-model="repporting.date2"/> <button class="btn btn-success" value="generate file">Generate File</button> </div> <form class="form-inline center-block"> <div class="form-group"> <select ng-model="repporting.customer" class="form-control"> <option value="all">ALL</option> <option ng-repeat="customer in customers" value={{customer.id}}>{{ customer.customer_name | uppercase}}</option> </select> <button ng-click="repport()" class="btn btn-default"> Repports</button> <span class="label label-success" ng-if="count"> {{count }}</span> </div> </form>

Seul, $scope.repporting.customer qui est envoyé lors de mon appel ajax, j'attends les deux valeurs date.
Merci.

4 réponses

Maenhyr, il y a 10 ans

Le probleme vient du fait que lorsqu'une valeur est choisie dans ton datepicker, tu ne fais pas de $scope.apply() pour mettre a jour ton scope dans ton controller.

Pour regler le probleme, il faut que tu instancies $setViewValue() https://docs.angularjs.org/api/ng/type/ngModel.NgModelController.

app.directive('datepicker', function () { return { restrict: 'A', link: function (scope, element, attrs) { $(element) .datepicker({ autoclose: true, format: "dd/mm/yyyy", todayHighlight: true, }) .on('changeDate', function () { ngModelCtrl.$setViewValue($(element).val()); scope.$apply(); }); } } });

Quelque chose comme cela. De la meme maniere, il faut que tu instancies des watchers sur la variable AngularJS qui vont mettre a jour le plugin JS.

zikou23, il y a 10 ans

merci merci @prbaron, je vais voir cela.

zikou23, il y a 10 ans

Désolé d'avoir répondu aussi tard, l'objet ngModelCtrl dont tu dis, n'est pas reconnu par le framework, je l'ai mis comme 4è paramètre de la fonction link mais ça marche pas.

Maenhyr, il y a 10 ans

Pardon, j'ai codé un peu vite, il faut ajouter require: 'ngModel',

app.directive('datepicker', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { $(element) .datepicker({ autoclose: true, format: "dd/mm/yyyy", todayHighlight: true, }) .on('changeDate', function () { ngModelCtrl.$setViewValue($(element).val()); scope.$apply(); }); } } });