基于datetimepicker封装的dateRange指令

1.需要npm引入

npm install angular-bootstrap-datetimepicker --save

2.加载:module

angular.module('app', [ui.bootstrap.datetimepicker])

3.JS:

angular.module('app').directive('dateRange', function() {
    return {
        restrict : 'EA',
        replace: true,
        scope: {
            startDate: '=',
            endDate: '=',
            startId: '@',
            endId: '@'
        },
        template : '<div class="date-box-vms">' +
        '<div class="dropdown">' +
        '<a class="dropdown-toggle" id="{{startId}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
        '<div class="input-append date input-group">' +
        '<span class="add-on"><i class="icon-th"><img src="/styles/img/icon/icon_cal.png" alt=""></i></span>' +
        '<input type="text" class="date-style" data-ng-model="startDate" placeholder="{{\'START_TIME\' | translate}}">' +
        '</div>' +
        '</a>' +
        '<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
        '<div>' +
        '<datetimepicker data-ng-model="startDate"' +
        'data-datetimepicker-config="{ dropdownSelector: \'#\'+startId, renderOn: \'end-date-changed\' ,minView:\'day\',modelType: \'YYYY-MM-DD\'}"' +
        'data-on-set-time="startDateOnSetTime()"' +
        'data-before-render="startDateBeforeRender($view, $dates)"/>' +
        '</div>' +
        '<div>' +
        '<button class="btn btn-default-vms" ng-click="startToday()">{{ \'BTN_TODAY\' | translate }}</button>' +
        '<button class="btn btn-default-vms" ng-click="clearStartDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
        '</div>' +
        '</ul>' +
        '</div>' +
        '<span><img src="styles/img/icon/xian.png" alt=""></span>' +
        '<div class="dropdown">' +
        '<a class="dropdown-toggle" id="{{endId}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
        '<div class="input-append date input-group">' +
        '<span class="add-on"><i class="icon-th"><img src="/styles/img/icon/icon_cal.png" alt=""></i></span>' +
        '<input type="text" class="date-style" data-ng-model="endDate" placeholder="{{\'END_TIME\' | translate}}">' +
        '</div>' +
        '</a>' +
        '<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
        '<div>' +
        '<datetimepicker data-ng-model="endDate"' +
        'data-datetimepicker-config="{ dropdownSelector: \'#\'+endId, renderOn: \'start-date-changed\',minView:\'day\',modelType: \'YYYY-MM-DD\'}"' +
        'data-on-set-time="endDateOnSetTime()"' +
        'data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)">' +
        '</div>' +
        '<div>' +
        '<button class="btn btn-default-vms" ng-click="endToday()">{{ \'BTN_TODAY\' | translate }}</button>' +
        '<button class="btn btn-default-vms" ng-click="clearEndDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
        '</div>' +
        '</ul>' +
        '</div>' +
        '</div>',
        controller : function($scope) {
            //时间组件
            $scope.endDateBeforeRender = endDateBeforeRender;
            $scope.endDateOnSetTime = endDateOnSetTime;
            $scope.startDateBeforeRender = startDateBeforeRender;
            $scope.startDateOnSetTime = startDateOnSetTime;
            $scope.startToday = startToday;
            $scope.endToday = endToday;
            $scope.clearStartDate = clearStartDate;
            $scope.clearEndDate = clearEndDate;
            $scope.nowDate =  moment(new Date).format('YYYY-MM-DD');
            $scope.endId = _.isEmpty($scope.endId)? 'endTime':$scope.endId;
            $scope.startId = _.isEmpty($scope.startId)? 'startTime':$scope.startId;

            function startDateOnSetTime () {
                $scope.$broadcast('start-date-changed');
            }

            function endDateOnSetTime () {
                $scope.$broadcast('end-date-changed');
            }

            function startDateBeforeRender ($view, $dates) {
                if ($scope.endDate) {
                    let activeDate = moment($scope.endDate).add(1, $view).subtract(1, 'minute');

                    $dates.filter(function (date) {
                        return date.localDateValue() >= activeDate.valueOf()
                    }).forEach(function (date) {
                        date.selectable = false;
                    })
                }
            }

            function endDateBeforeRender ($view, $dates) {
                if ($scope.startDate) {
                    let activeDate = moment($scope.startDate).subtract(1, $view).add(1, 'minute');

                    $dates.filter(function (date) {
                        return date.localDateValue() <= activeDate.valueOf()
                    }).forEach(function (date) {
                        date.selectable = false;
                    })
                }
            }
            function startToday (){
                $scope.startDate = $scope.nowDate;
                $scope.$broadcast('start-date-changed');
            }
            function endToday (){
                $scope.endDate = $scope.nowDate;
                $scope.$broadcast('end-date-changed');
            }
            function clearStartDate (){
                $scope.startDate ='';
                $scope.$broadcast('start-date-changed');
            }
            function clearEndDate (){
                $scope.endDate ='';
                $scope.$broadcast('end-date-changed');
            }

        }
    }
});

4.HTML:

<div ng-controller="myCtrl as $ctrl">
<date-range start-id="expectStart" end-id="expectEnd"
            start-date="$ctrl.startTime" 
            end-date="$ctrl.endTime"></date-range>
</div>

引入id是为了区分组件，否则同一组件在同一页面，会出问题。可以试一下~

　同理，单个时间控件可以是这样的写：

angular.module('app').directive('dateChose', function() {
    return {
        restrict : 'EA',
        replace: true,
        scope: {
            date: '=',
            id:'@',
            required:'='
        },
        template : '<div class="date-box-vms">' +
        '<div class="dropdown">' +
        '<a class="dropdown-toggle" id="time_{{id}}" role="button" data-toggle="dropdown" data-target="#" href="#">' +
        '<div class="input-append date input-group">' +
        '<span class="add-on"><i class="icon-th"><img src="styles/img/icon/icon_cal.png" alt=""></i></span>' +
        '<input type="text" class="date-style" data-ng-model="date" ng-required="required">' +
        '</div>' +
        '</a>' +
        '<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
        '<div>' +
        '<datetimepicker ng-model="date"' +
        'datetimepicker-config="{ dropdownSelector: \'#time_\' + id,minView:\'day\',modelType: \'YYYY-MM-DD\'}"/>' +
        '</div>' +
        '<div>' +
        '<button class="btn btn-default-vms" ng-click="Today()">{{ \'TODAY\' | translate }}</button>' +
        '<button class="btn btn-default-vms" ng-click="clearDate()">{{ \'BTN_CLEAR\' | translate }}</button>' +
        '</div>' +
        '</ul>' +
        '</div>' +
        '</div>',
        controller : function($scope) {
            //时间组件
            $scope.Today = Today;
            $scope.clearDate = clearDate;
            $scope.nowDate =  moment(new Date).format('YYYY-MM-DD');

            function Today (){
                $scope.date = $scope.nowDate;
            }
            function clearDate (){
                $scope.date ='';
            }
        }
    }
})

<date-chose date="$ctrl.time" required="true"></date-chose>