js 选择控件 picker

首先预览图效果：

概述：

只是一个选择器，选择器内可以有多个分类，但输入目标只有一个.比较适合上图所示的情况:需要用户选择一个开始时间，且时间是限定死的，这个开始时间可能是昨天今天或明天。这个插件就是用来解决这个问题的，我不是一个前端工程师，所以代码的依赖 JQuery,样式是从bootstrap-datetimepicker那扒下来的几个，下面就是代码部分。

代码：

JS：

    <script type="text/javascript">        !function ($) {            var Picker = function (element, options) {                var defaultContent = {                    name: '',                    data: [],                    PRefix: '',                    suffix: '',                    isShowData: true                }                var that = this;                this.element = $(element);                this.isInput = this.element.is('input');                this.container = options.container || 'body';                this.firstView = options.firstView;                this.isClose = options.isClose;                var template = ' <div class="picker dropdown-menu" id="pickerContainer" style="display:none;width:280px" >';                var content = options.content;                               $.each(content, function (index, subelement) {                    subelement = $.extend({}, defaultContent, subelement);                    var temp = DPGlobal.template;                    temp = temp.replace("{title}", subelement.name).replace("{prefix}", subelement.prefix).replace("{suffix}", subelement.suffix).replace('{displayStyle}', index == options.firstView ? '' : 'style="display:none;"')                    .replace('{leftArrow}', 'glyphicon glyphicon-arrow-left').replace('{rightArrow}', 'glyphicon glyphicon-arrow-right');                    if (index > 0) {                        temp = temp.replace("{leftVisibility}", "visibility:visible;")                    } else {                        temp = temp.replace("{leftVisibility}", "visibility:hidden;")                    }                    if (index < (content.length - 1)) {                        temp = temp.replace("{rightVisibility}", "visibility:visible;")                    } else {                        temp = temp.replace("{rightVisibility}", "visibility:hidden;")                    }                    var str = '';                    $.each(subelement.data, function (index, e) {                        str += '<span>' + e + '</span>';                    });                    temp = temp.replace("{body}", str);                    template += temp;                });                template += '</div>';                this.pickerBody = $(template).appendTo(this.container) // 'body').on({    click: $.proxy(this.click, this),    mousedown: $.proxy(this.mousedown, this)});                $(document).on('mousedown', function (e) {                    // Clicked outside the datetimepicker, hide it                    if ($(e.target).closest('.picker').length === 0) {                        that.pickerBody.hide();                    }                    if (e.target == element[0]) {                        that.pickerBody.CSS("left", element.offset().left);                        that.pickerBody.css("top", element.offset().top + element.outerHeight());                        that.initialize();                        that.pickerBody.show();                    }                });                $.proxy(this.initialize, this);            }            Picker.prototype = {                click: function (element) {                    var $target = $(element.target);                    if ($target.length == 1) {                        switch ($target[0].nodeName.toLowerCase()) {                            case 'i':                                var $div = $target.closest('div');                                switch ($target.closest('th').attr('class')) {                                    case 'prev':                                        $div.hide();                                        $div.prev('div').show();                                        break;                                    case 'next':                                        $div.hide();                                        $div.next('div').show();                                        break;                                    default:                                        break;                                }                                break;                            case 'span':                                //层次变换  if else                                var $td = $target.closest('td');                                if ($target.hasClass('active'))                                    break;                                $('#pickerContainer span').removeClass('active');                                $target.addClass('active');                                this.activeObj = $target;                                this.setValue();                                if (this.isClose)                                    this.pickerBody.hide();                                break;                            default:                                break;                        }                    }                },                setValue: function () {                    var formatted = this.getFormattedDate();                    if (!this.isInput) {                        this.element.find('input').val(formatted);                    } else {                        this.element.val(formatted);                    }                },                getFormattedDate: function (format) {                    var $parentDiv = this.activeObj.closest('div');                    return $parentDiv.attr('prefix') + this.activeObj.text() + $parentDiv.attr('suffix');                },                initialize: function () {                    var $divs = this.pickerBody.find('div');                    $divs.css('display', 'none');                    $($divs[this.firstView]).removeAttr('style');                }                            }            //DPGlobal            var DPGlobal = {                headTemplate: '<thead>' +                                      '<tr>' +                                      '<th class="prev" style="{leftVisibility} cursor:pointer;"><i class="{leftArrow}"/></th>' +                                      '<th colspan="5" class="switch">{title}</th>' +                                      '<th class="next" style="{rightVisibility} cursor:pointer;"><i class="{rightArrow}"/></th>' +                                      '</tr>' +                    '</thead>',                contTemplate: '<tbody><tr><td colspan="7">{body}</td></tr></tbody>',                footTemplate: '<tfoot><tr><th colspan="7">{foot}</th></tr><