Рабочий пример директивы AngularJS и Bootstrap DatePicker?

Я видел множество примеров директив github, но ни один из них не включает рабочий JSFiddle, и я не смог заставить кого-либо из них работать. Удивленный это не находится в Angular-UI к этому моменту.

Ответ 1

см. эту директиву, рабочий календарь 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);
                            });
                        }
                    });
                }
            };
        })

Ответ 2

Предположим, что это находится в вашем 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>

И затем в вашем контроллере .js:

$scope.doSomethingWithDate = function (date){
  alert(date);
};

Что он, он работает:)

Ответ 3

Надеюсь, это поможет, я искал простой пример, но я не мог его найти, я нашел один, но полный кода и ссылок, и я его очистил, вот самый простой рабочий пример datepicker с помощью angular bootstrap:

--- > образец страницы < ---

Ответ 4

Пожалуйста, проверьте сейчас. Вы забыли добавить в него jquery и css.

Скрипт здесь