Angular js中的Twitter引導日期選擇器

Question

我正在使用twitter bootstrap，Angular js和Taffy DB構建應用程序。

的javascript：

$(function() { 
    $('#datepicker').datepicker(); 
    }); 

    $scope.submit = function() { 
    console.log($scope.eventdate); 
    }; 

HTML：

<label for="eventdate">Date</label> 
    <div class="input-append date" id="datepicker" data-date-format="dd-mm-yyyy"> 
    <input class="span2" size="20" type="text" id="eventdate" ng-model="eventdate"> 
    <span class="add-on"><i class="icon-th"></i></span> 
    </div> 

但console.log($scope.eventdate);是不確定的。

請指點

Answer 1

使用角directive jQuery的日期選擇

Demo

Answer 2

如果你決定使用角度，把datepicker到指令：

JS

app.controller('MainCtrl', function($scope) { 
    $scope.var1 = '12-07-2013'; 
}); 


app.directive('datetimez', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      element.datetimepicker({ 
      dateFormat:'dd-MM-yyyy', 
      language: 'en', 
      pickTime: false, 
      startDate: '01-11-2013',  // set a minimum date 
      endDate: '01-11-2030'   // set a maximum date 
      }).on('changeDate', function(e) { 
      ngModelCtrl.$setViewValue(e.date); 
      scope.$apply(); 
      }); 
     } 
    }; 
}); 

HTML

<div class="container container-fluid" ng-controller="MainCtrl"> 
     var1={{var1}} 
     <form class="form-horizontal" novalidate name="form" ng-submit="submit()"> 
     <div class="well"> 
     <div id="date" class="input-append" datetimez ng-model="var1"> 
      <input data-format="MM-dd-yyyy" type="text" id="input1" name="input1"></input> 
      <span class="add-on"> 
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
      </span> 
     </div> 
     </div> 

Plunker

Answer 3

爲什麼不使用這樣的：http://angular-ui.github.io/bootstrap/。它具有作爲Angular指令創建的所有引導模塊，因此不需要重新發明輪子。

Answer 4

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

--->sample page < ---