Usando date picker do JQuery UI no Angular JS

From Basef
Jump to: navigation, search

Para usar o date picker do JQuery com Angular JS:

1) Configurar a directiva:

angular
    .module('app')
    .directive('datepicker', function() {
        return {
            restrict: 'A',
            require : 'ngModel',
            link : function (scope, element, attrs, ngModelCtrl) {
                $(function(){
                    element.datepicker({
                        dateFormat:'dd/mm/yy',
                        onSelect:function (date) {
                            scope.$apply(function () {
                                ngModelCtrl.$setViewValue(date);
                            });
                        }
                    });
                });
            }
        }
    });

2) Incluir o HTML:

<input type="text" ng-model="date" datepicker />

3) Incluir o arquivo JS e CSS do Jquery UI na ordem apresentada:

<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="angular.min.js"></script>