Jquery Datepicker UI

Hallo, ich habe Schwierigkeiten, dieses Datum/Kalender Jquery UI in Angularjs (als Anfänger) zu arbeiten. Das UI-Widget wird nicht angezeigt und die Fehlermeldung erhalte ich ist:Jquery Datepicker UI

Typeerror: elem.datepicker keine Funktion

ist ich jquery damit verbunden haben

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Dies ist meine hTML-Ansicht:

<div ng-controller="DateCtrl"> 
    <h1> Date: {{date | date:"dd/MM/yyyy"}}</h1> 
    <input type="text" ng-model="date" datepicker /> 
</div>

Dies ist mein Controller und Richtlinie:

.controller('DateCtrl', function($scope) { 
    $scope.date = new Date(); 
}) 
.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, elem, attrs, ngModelCtrl) { 
      elem.datepicker({ 
       dateFormat:'dd/mm/yy', 
       onSelect: function (date) { 
        ngModelCtrl.$setViewValue(date); 
        scope.$apply(); 
       } 
      }); 
     } 
    } 
});

Quelle

2016-05-21 A Allen

als Anregung und nicht als Antwort, haben Sie AngularUI des picker betrachtet mit (jQueryUI für Winkel gebaut) https://github.com/angular-ui/ui -Datum – haxxxton

kopiert ich Ihren Code und seine Arbeits für mich mit den folgenden:

Stellen Sie sicher, Skripte in der richtigen Reihenfolge:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<script src="lib/angular.min.js"></script> 
<script src="app.js"></script>

Mein app.js:

// Where 'app' is whatever you're using to define ng-app 
// e.g. <body ng-app="app"> 
var app = angular.module('app', []); 

app.controller('DateCtrl', function($scope) { 
    $scope.date = new Date(); 
}); 

app.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, elem, attrs, ngModelCtrl) { 
      elem.datepicker({ 
       dateFormat:'dd/mm/yy', 
       onSelect: function (date) { 
        ngModelCtrl.$setViewValue(date); 
        scope.$apply(); 
       } 
      }); 
     } 
    } 
});

Als ein anderer Vorschlag Ich würde empfehlen, dass es einfacher zu verwenden UI Bootstrap mit Angular ist.

Quelle

2016-05-21 01:39:26

Kleine Änderungen erforderlich in Ihrer Richtlinie:

.directive("datepicker", function() { 
     return { 
     restrict: "A", 
     require: "ngModel", 
     link: function (scope, elem, attrs, ngModelCtrl) { 
      var updateModel = function (date) { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(date); 
      }); 
      }; 
      var options = { 
      dateFormat: "dd/mm/yy", 
      onSelect: function (date) { 
       updateModel(date); 
      } 
      }; 
      elem.datepicker(options); 
     } 
     } 
    });

Quelle

2016-05-21 03:36:12 ihemant360

Antwort

Verwandte Themen