Twitter bootstrap datepicker в Angular js

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 DatePicker

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/. Он имеет все модули бутстрапа, созданные как угловые директивы, поэтому нет необходимости повторно изобретать колесо.

Answer 4

Я надеюсь, что это поможет, я искал простой пример, но я не мог его найти, я нашел один, но полный кода и ссылок, и я его очистил, вот самый простой рабочий пример datepicker с использованием угловых самозагрузки:

--->sample page < ---