Wie zu verwenden datepicker in AngularJS mithilfe von benutzerdefinierten Richtlinie als Klasse?

Unten sind meine HTML-und Javascript-code, die ich verwendet habe.

HTML-Code:

<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="date.js"></script>
</head>
<body>
    <div ng-app="app">
        <input type="text" ng-model="date" class="datepicker"></input>
        {{ date }}
    </div>
</body>
</html>

Java-Script:

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

datePicker.directive('datepicker', function () {
    return {
        restrict: 'C',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd, MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }    
    };
});

Nun wenn ich auf die textbox, der datepicker popup nicht kommt.

Kann mir bitte jemand helfen mit einer Lösung, die diesen datepicker arbeiten?

InformationsquelleAutor kumareloaded | 2014-11-07

  1. 6

    Ich sehe ein paar Fehler im code.
    Sie haben nicht ausdrücklich gesagt, welche datepicker mit, damit ich davon ausgegangen, es war jquery.UI, basierend auf Ihren tags.

    1) müssen Sie jquery.UI CSS auch

    2) Sie können nicht verwenden element.datepicker. element ist nicht jQuery-Objekt. Sie brauchen, um es in jquery-Objekt. wie Balg

    HTML:

    <div ng-app="myApp">
    <input type="text" ng-model="date" class="datepicker"></input>
    </div>

    JS:

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


app.directive('datepicker', function () {
return {
    restrict: 'C',
    require: 'ngModel',
     link: function (scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                dateFormat: 'dd, MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }    
    Y};
});

    Hier ist eine funktionierende Geige http://jsfiddle.net/esx6k1nc/

    InformationsquelleAutor Icepick

  2. 0

    Ich bin mir nicht sicher, ob dies ist das gleiche format für die bootstrap-datepicker. Dieser arbeitete für mich, wenn mit bootstrap-datepicker. Fügen Sie diese zu Ihrem controller:

    $('#datepicker').datepicker({
    todayHighlight: true,
    format: 'mm/dd/yyyy',
    autoclose: true
 }).on('changeDate', function (date) {
    $scope.date = date.format();
    $scope.$apply();
});

    InformationsquelleAutor Juan

Schreibe einen Kommentar