jQuery ui datepicker avec Angularjs
Je veux utiliser datepicker jQuery UI avec AngularJS.
J'ai un échantillon, mais mon code ne fonctionne pas.
Échantillon:
http://www.abequar.net/jquery-ui-datepicker-with-angularjs/
Mon code:
<input id="sDate" name="programStartDate" type="text" datepicker required/>
angular.module('elnApp')
.directive('datepicker', function () {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'yy-mm-dd',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
} });
Il montre une erreur TypeError: Object [object Object] has no method 'datepicker'.
J'ai presque exactement le même code que vous et le mien fonctionne.
Avez-vous jQueryUI.js inclus dans la page?
Il y a un violon ici
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
var datePicker = angular.module('app', []);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
Vous aurez également besoin de ng-app = "app" quelque part dans votre code HTML
angular.module('elnApp')
.directive('jqdatepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
$(element).datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function(date) {
ctrl.$setViewValue(date);
ctrl.$render();
scope.$apply();
}
});
}
};
});
Il est recommandé, surtout si vous avez plusieurs sélecteurs de date, de coder en dur le nom de la variable de portée de l'élément.
Au lieu de cela, vous devriez obtenir le ng-model de l'entrée cliquée et mettre à jour la variable de portée correspondante dans la méthode onSelect.
app.directive('jqdatepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
var ngModelName = this.attributes['ng-model'].value;
// if value for the specified ngModel is a property of
// another object on the scope
if (ngModelName.indexOf(".") != -1) {
var objAttributes = ngModelName.split(".");
var lastAttribute = objAttributes.pop();
var partialObjString = objAttributes.join(".");
var partialObj = eval("scope." + partialObjString);
partialObj[lastAttribute] = date;
}
// if value for the specified ngModel is directly on the scope
else {
scope[ngModelName] = date;
}
scope.$apply();
}
});
}
};
});
MODIFIER
Pour résoudre le problème soulevé par @Romain (Éléments imbriqués), j'ai modifié ma réponse.
J'ai finalement pu exécuter la directive datepicker en js angulaire, voici les pointeurs
inclure suivants JS dans l'ordre
- jquery.js
- jquery-ui.js
- angular-min.js
J'ai ajouté le suivant
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
en code html
<body ng-app="myApp" ng-controller="myController">
// some other html code
<input type="text" ng-model="date" mydatepicker />
<br/>
{{ date }}
//some other html code
</body>
dans le fichier js, assurez-vous d’abord coder pour la directive, puis ajoutez le code pour le contrôleur, sinon cela causera des problèmes.
directive sur le sélecteur de date:
var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
code de directive mentionné dans les réponses ci-dessus.
Après cette directive, écrivez le contrôleur
app.controller('myController',function($scope){
//controller code
};
ESSAYEZ CECI AU LIEU en js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
avec jquery.js et jquery-ui.js
nous pouvons mettre en œuvre js datepicker angulaire comme
<input type="date" ng-model="date" name="DOB">
Cela donne le sélecteur de date intégré et la date est définie dans ng-model et peut être utilisée pour un traitement et une validation ultérieurs.
Trouvé cela après beaucoup de headbanging réussi avec l'approche précédente. :)
onSelect ne fonctionne pas bien dans ng-repeat, alors j'ai créé une autre version avec event bind
html
<tr ng-repeat="product in products">
<td>
<input type="text" ng-model="product.startDate" class="form-control date-picker" data-date-format="yyyy-mm-dd" datepicker/>
</td>
</tr>
scénario
angular.module('app', []).directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker();
element.bind('blur keyup change', function(){
var model = attrs.ngModel;
if (model.indexOf(".") > -1) scope[model.replace(/\.[^.]*/, "")][model.replace(/[^.]*\./, "")] = element.val();
else scope[model] = element.val();
});
}
};
});
Malheureusement, la réponse de vicont n'ayant pas fonctionné pour moi, j'ai donc cherché une autre solution aussi élégante, qui convient également aux attributs imbriqués dans le modèle ng. Il utilise $ parse et accède au modèle ng à travers les attributs de la fonction de liaison au lieu de l'exiger:
myApp.directive('myDatepicker', function ($parse) {
return function (scope, element, attrs, controller) {
var ngModel = $parse(attrs.ngModel);
$(function(){
element.datepicker({
...
onSelect:function (dateText, inst) {
scope.$apply(function(scope){
// Change binded variable
ngModel.assign(scope, dateText);
});
}
});
});
}
});
Source: ANGULAR.JS SE LIANT À JQUERY UI (DATEPICKER EXEMPLE)
J'ai modifié le code et mis à jour la vue enveloppée dans $ apply ().
link: function (scope, elem, attrs, ngModelCtrl){
var updateModel = function(dateText){
// call $apply to update the model
scope.$apply(function(){
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "dd/mm/yy",
// handle jquery date change
onSelect: function(dateText){
updateModel(dateText);
}
};
// jqueryfy the element
elem.datepicker(options);
}
travail du violon - http://jsfiddle.net/hsfid/SrDV2/1/embedded/result/
Voici le meilleur article que j'ai trouvé: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs
Cela a pris 20 minutes pour l'intégrer à ma page.
Votre fichier Index.html principal pour Angular peut utiliser la balise body comme vue ng. Il vous suffit ensuite d'inclure une balise de script au bas de la page extraite dans Index.html par Angular, comme suit:
<script type="text/javascript">
$( function() {
$( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true,
yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>
Pourquoi trop compliquer les choses?
Voici mon code-
var datePicker = angular.module('appointmentApp', []);
datePicker.directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function (date) {
scope.appoitmentScheduleDate = date;
scope.$apply();
}
});
}
};
});
var selectDate = element.datepicker({
dateFormat:'dd/mm/yy',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
}).on('changeDate', function(ev) {
selectDate.hide();
ngModelCtrl.$setViewValue(element.val());
scope.$apply();
});
myModule.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
var ar=date.split("/");
date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
ngModelCtrl.$setViewValue(date.getTime());
// scope.course.launchDate = date;
scope.$apply();
}
});
}
};
});
Code HTML :
<input type="text" jqdatepicker ng-model="course.launchDate" required readonly />
J'ai eu le même problème et il a été résolu en mettant les références et inclut dans cet ordre:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
var datePicker = angular.module('app', []);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app="app">
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
</body>