landers.angular/src/js/control/directive-datatime-picker.js

landers.angular

;angular.module('Landers.angular')
    .factory('DatatimePickerHelper', ['Flat', '$timeout', function(Flat, $timeout){
        function DatatimePickerHelper(scope, ngModel, $begin, $end) {
            var ngModelBegin = $begin.attr('ng-model');
            var ngModelEnd = $end.attr('ng-model');
            this.set = function(begin, end){
                $timeout(function(){
                    begin = begin || '';
                    end = end || '';
                    if (ngModelBegin) {
                        Flat.set(scope, ngModelBegin, begin);
                    } else {
                        $begin.val(begin);
                    }
                    if (ngModelEnd) {
                        Flat.set(scope, ngModelEnd, end);
                    } else {
                        $end.val(end);
                    }
                    if (ngModel) {
                        Flat.set(scope, ngModel, begin || end ? [begin, end] : undefined);
                    }
                    if (ngModelBegin || ngModelEnd || ngModel) scope.$apply();
                }, 100);
            };
        }

        return {
            make : function(scope, ngModel, $begin, $end){
                return new DatatimePickerHelper(scope, ngModel, $begin, $end);
            },
            locale : {
                'zh_CN' : {
                    today : '定位今天',
                    clear : '清空',
                    close : '关闭',
                    selectMonth: '选择月份',
                    prevMonth: '上月',
                    nextMonth: '下月',
                    selectYear: '选择年份',
                    prevYear: '上年',
                    nextYear: '下年',
                    selectDecade: 'Select Decade',
                    prevDecade: 'Previous Decade',
                    nextDecade: 'Next Decade',
                    prevCentury: 'Previous Century',
                    nextCentury: 'Next Century',
                    pickHour: '选取小时',
                    incrementHour: '增加小时',
                    decrementHour: '减少小时',
                    pickMinute: '选取分钟',
                    incrementMinute: '增加分钟',
                    decrementMinute: '减少分钟',
                    pickSecond: '选取秒',
                    incrementSecond: '增加秒',
                    decrementSecond: '减少秒',
                    togglePeriod: 'Toggle Period',
                    selectTime: '选择时间'
                }
            }
        };
    }])
    .directive('bootstrapDatetimePicker', ['Flat', '$timeout', 'DatatimePickerHelper', '$rootScope', function(Flat, $timeout, DatatimePickerHelper, $rootScope){
        return {
            restrict : 'A',
            link : function($scope, $ele, $attrs){
                var ngModel = $attrs['ngModel'];
                $ele.addClass('datetime-picker');
                var $begin = $ele.children('.datetime-begin');
                var $end = $ele.children('.datetime-end');
                if (!$begin.length && !$end.length) {
                    $begin = $end = $ele.find('input');
                }
                var page_lang = $('meta[http-equiv=Content-Language]').attr('content');;
                var navigator_lang = (navigator.language || navigator.userLanguage).replace('-', '_');
                var locale = $rootScope.Locale || page_lang || navigator_lang

                var helper = DatatimePickerHelper.make($scope, ngModel, $begin, $end);
                var defaults = {
                    format : 'YYYY-MM-DD HH:mm:ss',
                    showClose:true,
                    showClear:true,
                    sideBySide:false,
                    showTodayButton: true,
                    locale: locale,
                    tooltips:DatatimePickerHelper.locale[locale]
                };
                var config = $ele.data();
                delete config.$ngModelController;
                delete config.minDate;
                delete config.maxDate;
                config = angular.extend({}, defaults, config);

                $begin.add($end).datetimepicker(config);

                var values = {begin:'', end:''};
                $begin.on('dp.change', function(e){
                    if ( e.date) {
                        values.begin = e.date.format(config.format);
                    } else {
                        values.begin = '';
                    }
                    helper.set(values.begin, values.end);
                });
                $end.on('dp.change', function(e){
                    if ( e.date ) {
                        values.end = e.date.format(config.format);
                    } else {
                        values.end = '';
                    }
                    helper.set(values.begin, values.end);
                });
                $begin.add($end).on('dp.show', function(){
                    var $wrapper = $(this).next();
                    var dtp = $(this).data('DateTimePicker');
                    var minDate = $(this).data('minDate');
                    if (minDate) dtp.minDate(minDate);
                    var maxDate = $(this).data('maxDate');
                    if (maxDate) dtp.maxDate(maxDate);

                    setTimeout(function(){
                        $wrapper.find('.timepicker-picker a.btn').removeClass('btn');
                    }, 200);
                });
            }
        };
    }]);