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