Arbeitsbeispiel der AngularJS und Bootstrap DatePicker Direktive?

Question

Ich habe eine Vielzahl von Beispielen für die github-Direktive gesehen, aber keine enthält eine funktionierende JSFiddle und ich konnte keine davon zum Laufen bringen. Überrascht ist dies nicht in Angular-UI zu diesem Zeitpunkt.

Answer 1

Nehmen wir dies in Ihrem view.html ist:

 <script type="text/javascript" src="js/bootstrap-datepicker.js"></script> 
     <div id="datepicker"></div> 
     <script type="text/javascript"> 
     $('#datepicker').datepicker().on('changeDate', function(ev){ 
      var element = angular.element($('#datepicker')); 
      var controller = element.controller(); 
      var scope = element.scope(); 

      scope.$apply(function(){ 
      scope.doSomethingWithDate(ev.date); 
      }); 
     }); 
     </script> 

Und dann in Ihrem controller.js:

$scope.doSomethingWithDate = function (date){ 
    alert(date); 
}; 

, dass es, es funktioniert :)

Answer 2

sehen Sie bitte dieses Richtlinie, ein funktionierender Kalender fiddle: http://jsfiddle.net/nabeezy/HB7LU/209/

myApp.directive('calendar', function() { 
      return { 
       require: 'ngModel', 
       link: function (scope, el, attr, ngModel) { 
        $(el).datepicker({ 
         dateFormat: 'yy-mm-dd', 
         onSelect: function (dateText) { 
          scope.$apply(function() { 
           ngModel.$setViewValue(dateText); 
          }); 
         } 
        }); 
       } 
      }; 
     }) 

Answer 3

Ich hoffe, dass dies hilft, ich suchte nach einem einfachen Beispiel, aber ich konnte es nicht finden, fand ich aber voll von Code und Links und ich habe es gereinigt, hier ist das einfachste Beispiel von Datepicker mit eckigen Bootstrap:

--->sample page < ---

Answer 4

Bitte überprüfen Sie jetzt. Sie haben vergessen, jquery und css darin hinzuzufügen.

Fiddle here