An Angular datepicker directive (angular-ui-bootstrap datepicker overlay)

DatepickerDirective.js

(function () {
    'use strict';

    angular.module('solisPaiementApp.directives')
        .directive('myDatepicker', ['$timeout', function ($timeout) {

            return {
                restrict: 'A',
                require: ['^?form', 'ngModel'],
                scope: {
                    ngModel: '=',
                    ngDisabled: '=?',
                    ngRequired: '=?',
                    minDate: '=?',
                    maxDate: '=?',
                    name: '@'
                },
                templateUrl: 'my_datepicker.html',
                link: function ($scope, element, attrs, ctrls) {
                    $scope.datepicker = {
                        opened: false
                    };

                    var $minDate;
                    var $maxDate;

                    $scope.updateModel = function (date) {
                        if (!date || !ctrls[0]) {
                            return;
                        }

                        var $date = moment(date);

                        var input = ctrls[0][$scope.name];

                        if (!_.isNull($minDate) && $date.isBefore($minDate) || !_.isNull($maxDate) && $date.isAfter($maxDate)) {
                            if (!_.isNull($minDate) && $date.isBefore($minDate)) {
                                input.$setValidity('min-date', false);
                            }
                            if (!_.isNull($maxDate) && $date.isAfter($maxDate)) {
                                input.$setValidity('max-date', false);
                            }
                        } else {
                            input.$setValidity('min-date', true);
                            input.$setValidity('max-date', true);
                        }

                        ctrls[1].$setViewValue(date);
                    };

                    $timeout(function () {
                        refreshMinDate();
                        refreshMaxDate();

                        $scope.updateModel($scope.ngModel);

                        if (!$scope.name) {
                            throw new Error('Attention ! L\'attribut name est obligatoire sur les my-datepicker !');
                        }

                        if ((!_.isNull($minDate) || !_.isNull($maxDate)) && _.isNull(ctrls[0])) {
                            throw new Error('Attention ! La directive my-datepicker doit être dans un formulaire');
                        }
                    });

                    $scope.$watch('minDate', function () {
                        refreshMinDate();
                        $scope.updateModel($scope.ngModel);
                    });

                    $scope.$watch('maxDate', function () {
                        refreshMaxDate();
                        $scope.updateModel($scope.ngModel);
                    });

                    function refreshMinDate() {
                        $minDate = $scope.minDate ? moment($scope.minDate) : null;
                    }

                    function refreshMaxDate() {
                        $maxDate = $scope.maxDate ? moment($scope.maxDate) : null;
                    }
                }
            };

        }])
    ;

}());

my_datepicker.html

<input ng-model="ngModel"
       ng-disabled="ngDisabled"
       ng-required="ngRequired"
       ng-change="updateModel(ngModel)"
       min-date="minDate"
       max-date="maxDate"
       type="text"
       class="form-control input-sm datepicker"
       name="{{name}}"
       uib-datepicker-popup="dd/MM/yyyy"
       placeholder="jj/mm/aaaa"
       maxlength="10"
       is-open="datepicker.opened"
       close-text="Fermer"
       clear-text="Effacer"
       current-text="Aujourd'hui"/>
<span class="input-group-btn">
    <button type="button"
            class="btn btn-default btn-sm"
            ng-click="datepicker.opened = true"
            ng-disabled="ngDisabled">
        <span class="fa fa-calendar"></span>
    </button>
</span>

usage.html

<div class="input-group input-group-sm"
     my-datepicker
     name="dateDebutPaiement"
     ng-model="dateDebutPaiement"
     min-date="isNew()? dateDebut: aCompterDuMin"
     max-date="dateFin"
     ng-required="true"
     ng-change="update()"
     ng-disabled="champDestinatairePaiementEstInactif()">
</div>

There is a bug inside angular ui bootstrap datepicker component (angular-ui/bootstrap#6124). This is a way of correcting it.