Esempio di funzionamento della direttiva AngularJS e Bootstrap DatePicker?

Question

Ho visto una varietà di esempi di direttiva github, ma nessuno include un JSFiddle funzionante e non sono riuscito a far funzionare nessuno di loro. Sorpreso questo non è in Angular-UI da questo punto.

Answer 1

lascia per dire questo è nel vostro view.html:

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

E poi nei tuoi controller.js:

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

Questo è tutto, funziona :)

Answer 2

consulta questo direttiva, un calendario di lavoro 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

Spero che questo aiuti, stavo cercando un semplice esempio, ma non riuscivo a trovarlo, ne ho trovato uno ma pieno di codice e collegamenti e l'ho pulito, ecco l'esempio più semplice di datepicker usando angolare bootstrap:

--->sample page < ---

Answer 4

Si prega di controllare la società. Hai dimenticato di aggiungere jquery e css in esso.

Fiddle here