angular directive for pikaday

angular pikaday directive

(function () {
/*

// in html :
<link type="text/css" href="pikaday.css" />

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script src="mx.pikaday.js"></script>

<div ng-controller='mainController as mainCtrl'>
  <div pikaday pikadate="mainCtrl.date"></div>
</div>

// in angular app module
angular.module('app', ['mxPikaday']);

// in angular controller
app.controller('mainController', [function () {
    this.date = "2015-01-21";
}]);

*/
    var mx = angular.module('mxPikaday', []);
    
    mx.directive('pikaday', ['$filter', function ($filter) {
        return {
            template :  '<div><input model="pikadate"></input></div>',
            scope: {
                pikadate: '='
            },
            link : function (scope, element, attrs) {
                var picker = new Pikaday({
                    field: element[0].querySelector('input'),
                    i18n: {
                        previousMonth : 'Mois précédent',
                        nextMonth     : 'Mois suivant',
                        months        : ['Janvier', 'Février', 'Mars', 'Avri', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                        weekdays      : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                        weekdaysShort : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
                    },
                    firstDay : 1,
                    format: 'DD/MM/YYYY',
                    defaultDate: new Date(scope.pikadate),
                    setDefaultDate: true,
                    onSelect: function (date) {
                        scope.pikadate = $filter('date')(date, 'yyyy-MM-dd');
                        scope.$apply();
                    }
                });
            }
        };
    }]);
    
}());