AngularJS和Bootstrap DatePicker指令的工作示例？

Question

我見過各種github指令的例子，但都沒有包含一個可用的JSFiddle，我還沒有能夠讓它們工作。驚訝這是不是在Angular-UI到這一點。

Answer 1

可以說這是您的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> 

，然後在controller.js：

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

就是它，它的工作原理也:)

Answer 2

請參閱本指令，工作日曆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

我希望這可以幫助，我正在尋找一個簡單的例子，但我找不到它，我找到了一個，但充滿了代碼和鏈接，我清理它，這裏是datepicker使用角度最簡單的工作示例引導：

--->sample page < ---

Answer 4

請立即檢查。您忘記在其中添加jquery和css。

Fiddle here