datepicker-directive.js

app.js

(function() {
    var app = angular.module('app', [ 'siDate'])
        .service('datePickerConfig', ['$document', datePickerConfig]);

    function datePickerConfig($document) {
        var defaults = {
            autoclose: true,
            beforeShowDay: $.noop,
            calendarWeeks: true,
            clearBtn: false,
            daysOfWeekDisabled: [],
            endDate: Infinity,
            forceParse: true,
            format: 'yyyy-mm-dd',
            keyboardNavigation: true,
            language: 'it',
            minViewMode: 0,
            orientation: "top",
            rtl: false,
            startDate: -Infinity,
            startView: 0, //day picker
            /*
            startView: 1, //month picker
            startView: 2, //year picker
						*/

            todayBtn: true,
            todayHighlight: true,
            weekStart: 1
        };
        var svc = {};
        $document.ready(function(){
        	var dp = $('.datepicker').datepicker(defaults);
        	svc.datepicker = dp;
		});
        return svc;
    }
})();

datepicker-directive.js

(function() {
    var app = angular.module("siDate", [])
        .directive('datePicker', [datePicker]);


    function datePicker() {
        return {
            restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
            scope: {
                //@ reads the attribute value, = provides two-way binding, & works with functions
                name: '@',
                placeholder: '@',
                date: '=?'
            },
            template: '<div><input class="datepicker form-control" ' +
                ' name="{{ name }}" ng-model="date" ' +
                ' placeholder="{{ placeholder }}"  ' +
                ' required/></div>',
            link: function($scope, element, attrs) {

                } //DOM manipulation
        };
    }
})();