Angular js中的Twitter bootstrap datepicker

I am building an application with twitter bootstrap,Angular js and Taffy DB.

我正在使用twitter bootstrap，Angular js和Taffy DB构建一个应用程序。

javascript:

JavaScript的：

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

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

HTML:

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>

But console.log($scope.eventdate); is undefined.

但是console.log（$ scope.eventdate）;未定义。

Please advice

请指教

4 个解决方案

#1

If you decided to use Angular, put datepicker into directive:

如果您决定使用Angular，请将datepicker放入指令中：

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

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

Plunker

#2

Why not use this: http://angular-ui.github.io/bootstrap/ . It has all the bootstrap modules created as Angular directives, thus no need to re-invent the wheel.

为什么不使用这个：http：//angular-ui.github.io/bootstrap/。它具有作为Angular指令创建的所有引导模块，因此无需重新发明*。

#3

-1

I hope this helps, I was looking for a simple example, but I couldn't find it, I found one but full of code and links and I cleaned it, here is the most simple working example of datepicker using angular bootstrap:

我希望这有帮助，我正在寻找一个简单的例子，但是我找不到它，我发现了一个但是充满了代码和链接并且我清理了它，这里是使用angular bootstrap的datepicker最简单的工作示例：

---> sample page <---

--->样本页面<---

#4

-2

Use the Angular directive for jquery datepicker

对jquery datepicker使用Angular指令

Demo

演示

#1