22

我看过各种 github 指令示例，但没有一个包含有效的 JSFiddle，而且我无法让它们中的任何一个工作。令人惊讶的是，此时这不在Angular-UI中。

4

4 回答 4

13

请看这个指令，一个工作日历小提琴：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);
                            });
                        }
                    });
                }
            };
        })
于 2013-08-14T22:28:36.937 回答
6

假设这是在您的 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);
};

就是这样，它有效:)

于 2013-06-02T23:57:14.163 回答
4

我希望这会有所帮助，我正在寻找一个简单的示例，但我找不到它，我找到了一个但充满了代码和链接的示例，我清理了它，这是使用角度引导的 datepicker 最简单的工作示例：

--->示例页面<---

于 2014-07-18T15:28:46.370 回答
0

请立即检查。你忘了在里面添加jquery和 css。

在这里提琴

于 2016-04-27T07:16:28.773 回答