web-dev-qa-db-ja.com

AngularJSとBootstrap DatePickerディレクティブの実例？

さまざまなgithubディレクティブの例を見てきましたが、動作するJSFiddleが含まれているものはなく、動作させることもできませんでした。驚いたことに、この時点では Angular-UI にはありません。

javascripttwitter-bootstrapangularjs
22
brushleaf

このディレクティブ、作業カレンダーをご覧ください fiddle ： 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);
                            });
                        }
                    });
                }
            };
        })
13
Joe Nabeezy

これがあなたの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);
};

それだけです、動作します:)

6
LucasSeveryn

これが役立つことを願っています、私は簡単な例を探していましたが、それを見つけることができませんでしたが、コードとリンクでいっぱいのものを見つけてきれいにしました、angularブートストラップ：

---> サンプルページ <---

4
Chris Rosete

今すぐ確認してください。 jqueryとcssを追加するのを忘れました。

ここでフィドル

0
Navyah