Twitter Bootstrap Datepicker in Angular js

Question

Ich baue eine Anwendung mit Twitter Bootstrap, Angular js und 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> 

Aber console.log($scope.eventdate); ist nicht definiert.

Bitte Rat

Answer 1

Verwenden Sie den Winkel directive für Jquery Datepicker

Demo

Answer 2

Wenn Sie Angular, datepicker in Richtlinie gestellt entschieden:

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

Warum dies nicht nutzen: http://angular-ui.github.io/bootstrap/. Alle Bootstrap-Module sind als Angular-Direktiven erstellt, sodass das Rad nicht neu erfunden werden muss.

Answer 4

Ich hoffe, das hilft, ich suchte nach einem einfachen Beispiel, aber ich konnte es nicht finden, fand ich aber voll von Code und Links und ich habe es gereinigt, hier ist das einfachste Arbeitsbeispiel von Datepicker mit eckigen Bootstrap:

--->sample page < ---