jQuery ui datepicker avec Angularjs

Je veux utiliser jQuery UI datepicker avec AngularJS.

J'ai un échantillon , mais mon code ne fonctionne pas.

Exemple:

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 affiche une erreur TypeError: Object [object Object] has no method 'datepicker'.

essayez $(element).datepicker()
ok, merci pour votre aide, mais je veux savoir pourquoi? pourriez-vous me dire ce qui est " différent sur les deux?
element peut-être qu'une jQLite wrapper, pas entièrement fonctionnelle de l'objet jQuery.
J'ai eu le même problème et @madhead 's solution résolu. Merci
Assurez-vous que vous êtes, y compris jQuery avant Angulaire. Il va choisir qui et l'utilisation de la réelle bibliothèque jQuery plutôt que jQLite. Voir la documentation sur angulaire.l'élément.
Si vous êtes dynamiques à l'aide de l'id, voir ce post: stackoverflow.com/questions/19733723/...
Voulez-vous s'il vous plaît enseignez-moi pourquoi nous pouvons liaison la "datepicker()" la fonction de l'élément de l'objet? J'ai un problème avec angular-ui et jquery, tous les deux ont datepicker fonction, bien sûr, avec le rendu de l'INTERFACE utilisateur, nous pouvons savoir où l'on est en invoquant, mais je veux comprendre en profondeur ce sujet. Merci!

InformationsquelleAutor user2473037 | 2013-08-09

44

J'ai presque exactement le même code que vous et le mien fonctionne.

Avez-vous des 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 la ng-app="app" quelque part dans votre code HTML
- Que dois-je faire pour avoir un datepicker icône(cliquable) à côté de la zone de texte?
- comment mettre en valeur en ng-model si je suis à l'aide de plusieurs datepickers dans une page unique où chaque contrôle est connecté à différents ng-model?
- comment utiliser les css (couleur, ...) sur le champ de date ?
- J'ai trouvé , ex : élément.prop("readonly", true); élément.css("background-color", "transparent")
- Cela est apparu à travailler en ce qu'il affiche la date à partir de données, mais il ne serait pas mise à jour le modèle d'après la modification de la date. Si la liaison ne semblait travail. Je pense que c'est parce que ce n'est pas de mettre à jour le modèle, mais plutôt suppose que vous voulez que la date renseignée dans $champ d'application.date. @Jonghee Parc de la solution ci-dessous fonctionne correctement en mettant à jour le modèle que vous transmettez.
- Le problème avec ce code est votre onSelect est en train de faire "champ d'application.date = date;" Donc, quels que soient $portée variable de vous déclarer, chaque fois que vous sélectionnez une date, elle sera mis à jour à la date de valeur de "$champ d'application.date" à la place.
InformationsquelleAutor Kevin Jones

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();
                }
            });
        }
    };
});

cette réponse travaille beaucoup, même avec imbriqués les attributs, tout en le suivant, malheureusement, ne marche pas.
CELA devrait être la bonne réponse, car ici, vous définissez également le point de vue des valeurs! merci
Comment pouvons-nous traiter avec de multiples entrées ?

InformationsquelleAutor vicont

Comme une meilleure pratique, surtout si vous avez plusieurs sélecteurs de date, vous ne devriez pas coder en dur l'élément du champ nom de la variable.

Au lieu de cela, vous devriez obtenir l'cliqué sur entrée ng-model et mise à jour de ses correspondants de la portée de la variable à l'intérieur de la onSelect méthode.

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

À résoudre le problème que @Romain ressuscité (Éléments Imbriqués), j'ai modifié ma réponse

Il ne fonctionne pas si ng-model est imbriqué dans l'attribut. Par exemple ng-model="delivery.date" sera mise à jour du "delivery.date" propriété de la portée, de la place de la "date" propriété de $scope.delivery.
Bien que j'ai résolu le problème que vous avez décrit, je viens de réaliser que @vicont la réponse est mieux. Beaucoup plus élégant.

InformationsquelleAutor Nahn

J'ai finalement été en mesure d'exécuter datepicker directive en angular js , ici, sont des pointeurs

comprennent les suivantes JS afin

jquery.js
jquery-ui.js
angular-min.js

J'ai ajouté ce qui suit

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

dans le 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 js , assurez-vous de code pour la première directive et après que ajouter le code pour la manette , sinon, il va causer des problèmes.

sélecteur de date directive :

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 la directive visée de réponses ci-dessus.

Après cette directive , écrire le contrôleur

app.controller('myController',function($scope){
//controller code
};

ESSAYEZ PLUTÔT CECI en angular 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 angular js datepicker

<input type="date" ng-model="date" name="DOB">

Cela donne le construit dans le datepicker et la date est fixée en ng-model et peuvent être utilisées pour le traitement et la validation.

Trouvé cet après beaucoup de succès headbanging avec l'approche précédente. 🙂

Quant <input type="date" ng-model="date" name="date de naissance">, comment ça fonctionne. Avez-vous un exemple de travail de montrer?

InformationsquelleAutor rohit garg

J'ai modifié le code et enveloppé vue de mettre à jour à l'intérieur de $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);

}

de travail violon http://jsfiddle.net/hsfid/SrDV2/1/embedded/result/

salut @hS4 je m essayer cette vague, mais d'avoir d'erreur, comme cette " option onSelect n'est pas reconnu!'

InformationsquelleAutor hS4

onSelect ne fonctionne pas bien dans ng-repeat, j'ai donc fait une autre version à l'aide de l'événement lier

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>

script

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();
            });
        }
    };
});

InformationsquelleAutor Jonghee Park

Malheureusement, vicont la réponse n'a pas de travail pour moi, j'ai donc cherché une autre solution qui est aussi élégant et fonctionne pour imbriquée attributs dans le ng-model. Il utilise $parse et accède à la ng-modèle à travers la attrs dans 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 LA LIAISON À L'INTERFACE UTILISATEUR DE JQUERY (DATEPICKER EXEMPLE)

InformationsquelleAutor zeillah

2

Vous principal Index.html fichier Angulaire pouvez utiliser la balise body de la ng-view. Ensuite, tout ce que vous devez faire est d'inclure une balise de script en bas de quelle que soit la page est tirée dans Index.html par Angulaire de la sorte:
```
<script type="text/javascript">
$( function() {
    $( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true, 
        yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>
```
Pourquoi compliquer les choses??

InformationsquelleAutor Ciaran Whyte

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();
                }
            });
        }
    };
});

InformationsquelleAutor Fahim Iqbal

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 />

Dans StackOverflow nous préférons ne pas avoir juste un peu de code comme une réponse, mais l'avoir à côté d'une explication.comment répondre. De plus, vous devez indenter correctement.

InformationsquelleAutor Amit Bhandari

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();
});

bien que le code peut être sonore, un peu de texte permettrait d'aider les autres.

InformationsquelleAutor user8237545

J'ai eu le même problème et il a été résolu en mettant les références et comprend dans l'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>

JS:

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();
                }
            });
        }
    };
});

HTML:

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

InformationsquelleAutor Alexandre Nascimento

-3

Je pense que vous êtes absent de l'Angulaire de l'ui bootstrap de la dépendance dans votre déclaration de module, comme ceci:
```
angular.module('elnApp', ['ui.bootstrap'])
```
Voir le doc pour Angular-ui-bootstrap.
- Angulaire de l'interface utilisateur bootrstrap agit comme un pont entre jquery ui datepicker et Angulaires, qui peut être ce que vous cherchez
InformationsquelleAutor Raibaz

Vous devez vous connecter pour publier un commentaire.