it-swarm.com.de

jQuery ui datepicker mit Angularjs

Ich möchte jQuery UI datepicker mit AngularJS verwenden. 

Ich habe ein Beispiel, aber mein Code funktioniert nicht.

Probe:

http://www.abequar.net/jquery-ui-datepicker-with-angularjs/

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

                }
            });
        });
    }
} });

Es zeigt einen Fehler TypeError: Object [object Object] has no method 'datepicker'.

50
user2473037

Ich habe fast genau den gleichen Code wie du und meiner.

Haben Sie jQueryUI.js auf der Seite? 

Es gibt eine Geige hier

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

Sie benötigen auch ng-app = "app" irgendwo in Ihrem HTML-Code

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

Als bewährte Methode sollten Sie vor allem bei mehreren Datumsauswahlen den Namen der Bereichsvariablen des Elements nicht fest codieren.

Stattdessen sollten Sie den ng-model der angeklickten Eingabe abrufen und die entsprechende Bereichsvariable in der onSelect-Methode aktualisieren.

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

            });
        }
    };
});

EDIT

Um das von @Romain angesprochene Problem (geschachtelte Elemente) anzugehen, habe ich meine Antwort geändert

11
Nahn

Ich konnte endlich die Datepicker-Direktive in eckigen Js ausführen, hier sind Zeiger 

folgendes JS in der Reihenfolge einschließen

  1. jquery.js
  2. jquery-ui.js
  3. winkel-min.js

Ich habe folgendes hinzugefügt: 

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

in HTML-Code

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

stellen Sie in den js sicher, dass Sie zuerst den Code für die Direktive codieren und anschließend den Code für den Controller hinzufügen, da sonst Probleme auftreten.

richtlinie zur Datumsauswahl:

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

richtliniencode, auf den sich die Antworten beziehen. 

Schreiben Sie nach dieser Anweisung den Controller 

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

VERSUCHEN SIE DIESEN STATT in eckigen Js 

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  

zusammen mit jquery.js und jquery-ui.js

wir können als Datumsangaben den Winkel js datepicker implementieren 

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

Dadurch wird der eingebaute Datepicker und das Datum in ng-model festgelegt und können zur weiteren Verarbeitung und Validierung verwendet werden.

Fand dies nach vielem erfolgreichen Headbanging mit vorherigem Ansatz. :) 

5
rohit garg

onSelect funktioniert in ng-repeat nicht gut, daher habe ich eine andere Version mit Event-Bind erstellt

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>

skript

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

Leider hat die Antwort von vicont für mich nicht funktioniert, also habe ich nach einer anderen Lösung gesucht, die ebenso elegant ist und auch für verschachtelte Attribute im ng-Modell funktioniert. Es verwendet $ parse und greift auf das ng-model über die attrs in der Linking-Funktion zu, anstatt es zu benötigen:

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

Quelle: ANGULAR.JS BINDUNG AN JQUERY UI (DATEPICKER-BEISPIEL)

4
zeillah

Ich habe den Code geändert und das View-Update in $ apply () verpackt.

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

}

geige arbeiten - http://jsfiddle.net/hsfid/SrDV2/1/embedded/result/

4
hS4

Der beste Artikel, den ich gefunden habe, ist folgender: http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs

Es dauerte 20 Minuten, um es in meine Seite zu integrieren.

4
Natalia Svergun

Die Hauptdatei für die Datei index.html für Angular kann das body-Tag als ng-view verwenden. Alles, was Sie tun müssen, ist ein Skript-Tag am Ende jeder Seite, die von Angular in die Index.html gezogen wird.

<script type="text/javascript">
$( function() {
    $( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true, 
        yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>

Warum zu komplizierte Dinge?

2
Ciaran Whyte

Hier ist mein 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();
                }
            });
        }
    };
});
1
Fahim Iqbal
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();
});                            
1
user8237545
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();
                }
            });

        }
    };
});

HTML Quelltext :

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />
1
Amit Bhandari

Ich hatte das gleiche Problem und es wurde gelöst, indem die Referenzen eingefügt wurden und in dieser Reihenfolge enthalten sind:

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