EasyUI日期范围选择

前言

参考文献：https://www.cnblogs.com/juedui0769/p/5120051.html

1、功能介绍

• 支持 年月日时分秒 的选择。
• 支持 年月日 的选择。
• 你可以根据自己的需求来选择对应的控件。

2、最终效果

注：左侧的日期组件为 起始时间；右侧的日期组件为 结束时间。

描述：

1、选择结束时间时，会根据所选的起始时间进行过滤，只能选择起始时间之后的日期，不能选择的日期灰质不可点击。
2、反之，选择起始时间时，会根据所选的结束时间进行过滤，只能选择结束时间之前的日期，不能选择的日期灰质不可点击。

3、目录结构

基于jQuery EasyUI 1.4.2进行的功能测试，需要的小伙伴可以自行下载。
下载链接： http://www.jeasyui.com/download/list.php

4、操作步骤

4.1 、核心文件 — jquery.daterangebox.js

在plugins目录下新增 jquery.daterangebox.js 文件 ,文件内容如下

/**
 * jQuery EasyUI 1.4.2
 *
 * Copyright (c) 2009-2015 www.jeasyui.com. All rights reserved.
 *
 * Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt
 * To use it on other terms please contact us at info@jeasyui.com
 *
 */

(function($){



    //左侧日历改动
    var dateTypeRange;

    /**
     * 日期格式转化
     */
    function dateConver(date){
        var date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        // let time = y + '-' + m + '-' + d+' '+h+':'+minute;  //这里如果不需要小时 分  后边的可以不需要拼接
        let time = y + '-' + m + '-' + d;  //这里如果不需要小时 分  后边的可以不需要拼接
        return time;
    }

    /**
     * Add:日历组件、确定、取消按钮的创建
     */
    function createRoot(target){
        var state = $.data(target, 'daterangebox');
        var leftRoot, rightRoot;

        /*toolbar相关*/
        if (!state.topbar){
            var panel = $(target).combo('panel').css('overflow','hidden');
            state.topbar = $('<table cellspacing="0" cellpadding="0" style="width:100%;"><tr></tr></table>').appendTo(panel);
            var tr = state.topbar.find('tr');
            $('<td><div id="flag"></div></td>').appendTo(tr).css('width', '60%');
            var td2 = $('<td></td>').appendTo(tr).css('width', '40%');


            /*确定、取消按钮的设置*/
            state.zConfirmBtn = $('<a href="javascript:void(0);">确定</a>'),
                state.zCancelBtn = $('<a href="javascript:void(0);">取消</a>');
            $.each([state.zConfirmBtn,state.zCancelBtn],function(i,n){
                n.css({'float': 'right','width': '60px'}).appendTo(td2);
                n.linkbutton();
            });

            /*点击确定按钮进行相应判断*/
            state.zConfirmBtn.on('click', function(){
                var timeLeft = state.calendarLeft.datetimebox('getValue');
                var timeRight = state.calendarRight.datetimebox('getValue');
                if(timeLeft!='' && timeRight!='' ){
                    var lt = new Date(timeLeft).getTime(),
                        rt = new Date(timeRight).getTime();
                    if(rt >= lt){
                        $(target).combo('setValue', timeLeft+' - '+timeRight).combo('setText', timeLeft+' - '+timeRight);
                        $(target).daterangebox('setValue',timeLeft+' - '+timeRight);
                        $(target).combo('hidePanel');
                        document.getElementById("flag").innerHTML='';
                    }else{
                        document.getElementById("flag").innerHTML='请选择正确的结束时间';
                        $("#flag").css('color','#FFBCB6');
                        state.calendarRight.datetimebox('setValue','');
                    }
                }
            });

            /*点击取消按钮隐藏面板*/
            state.zCancelBtn.on('click', function(){
                $(target).combo('hidePanel');
            });
        }

        /**
         * 创建左侧日历
         */
        if (!state.calendarLeft){
            var panel = $(target).combo('panel').css('overflow','hidden');
            //Add:
            leftRoot = $('<div class="daterangebox-calendar-left"></div>').css('float','left').appendTo(panel);
            //Update:
            var ccLeft = $('<div class="daterangebox-calendar-inner-left"></div>').prependTo(leftRoot);
            //改动之一
            if(dateTypeRange == "d"){
                state.calendarLeft = $('<div></div>').appendTo(ccLeft).datebox();
                //改动之二
                $.extend(state.calendarLeft.datebox('options'), {
                    fit:true,
                    border:true,
                    onSelect:function(date){
                        var target = this.target;
                        var opts = $(target).daterangebox('options');
                        opts.onSelect.call(target, date);
                    },
                    onShowPanel:function (){
                        initLeft(state);
                    }
                });
            }else{
                state.calendarLeft = $('<div></div>').appendTo(ccLeft).datetimebox();
                //改动之二
                $.extend(state.calendarLeft.datetimebox('options'), {
                    fit:true,
                    border:true,
                    onSelect:function(date){
                        var target = this.target;
                        var opts = $(target).daterangebox('options');
                        opts.onSelect.call(target, date);
                    },
                    onShowPanel:function (){
                        initLeft(state);
                    }
                });
            }


        }

        /**
         * 创建右侧日历
         */
        if (!state.calendarRight){
            var panel = $(target).combo('panel').css('overflow','hidden');
            rightRoot = $('<div class="daterangebox-calendar-right"></div>').css({'float':'left'}).appendTo(panel);
            var ccRight = $('<div class="daterangebox-calendar-inner-right" style="margin-left: 52px;"></div>').prependTo(rightRoot);
            if(dateTypeRange == "d"){
                state.calendarRight = $('<div></div>').appendTo(ccRight).datebox();
                $.extend(state.calendarRight.datebox('options'), {
                    fit:true,
                    border:true,
                    onSelect:function(date){
                        var target = this.target;
                        var opts = $(target).daterangebox('options');
                        opts.onSelect.call(target, date);
                        $(state.calendarRight).combo("hidePanel");
                    },
                    onShowPanel:function (){
                        initRight(state);
                    }
                });
            }else {
                state.calendarRight = $('<div></div>').appendTo(ccRight).datetimebox();
                $.extend(state.calendarRight.datetimebox('options'), {
                    fit: true,
                    border: true,
                    onSelect: function (date) {
                        date = dateConver(date);
                        //onSelect方法本就是继承自datebox，故而此date不会有具体的时分秒，datetimebox中的时分秒来自微调器spinner获取代码如下
                        var time = $(state.calendarRight).datetimebox('spinner').timespinner('getValue');
                        state.calendarRight.datetimebox('setValue', date + " " + time);
                        state.calendarRight.datetimebox('setText', date + " " + time);
                        var target = this.target;
                        var opts = $(target).daterangebox('options');
                        opts.onSelect.call(target, date);
                        $(state.calendarRight).combo("hidePanel");
                    },
                    onShowPanel: function () {
                        initRight(state);
                    }
                });
            }
        }

    }

    /**
     * 左侧日历：根据右侧日历选择的日期来过滤
     * @param state
     */
    function initLeft(state){
        var righttime = state.calendarRight.datetimebox('getValue');
        if(righttime){
            var lt = new Date(righttime);
            state.calendarLeft.datetimebox('calendar').calendar({
                validator: function (date) {
                    if(date.getTime() <= lt.getTime()){
                        return true;
                    }
                    return false;
                },
                styler: function(date){
                    if(date.getTime() <= lt.getTime()){
                        return '';
                    }
                    return 'color:#cccccc';
                }
            });
        }
    }

    /**
     * 右侧日历：根据左侧日历选择的日期来过滤
     * @param state
     */
    function initRight(state){
        var lefttime = state.calendarLeft.datetimebox('getValue');
        if(lefttime){
            lefttime = lefttime.substring(0,10).replaceAll('-','/');
            var lt = new Date(lefttime);
            state.calendarRight.datetimebox('calendar').calendar({
                validator: function (date) {
                    if(date.getTime() >= lt.getTime()){
                        return true;
                    }
                    return false;
                },
                styler: function(date){
                    if(date.getTime() >= lt.getTime()){
                        return '';
                    }
                    return 'color:#cccccc';
                }
            });
        }
    }


    /**
     * 创建页面元素
     */
    function createBox(target){
        var state = $.data(target, 'daterangebox');
        var opts = state.options;

        if(opts.dateType != undefined){
            switch(opts.dateType) {
                case "d":
                    dateTypeRange = dateTypeRange = dateTypeRange = "d";
                    break;
            }

        }

        //在'onShowPanel'触发时会执行一系列的函数.
        $(target).addClass('daterangebox-f').combo($.extend({}, opts, {
            onShowPanel:function(){
                state.calendarLeft[0].target = this;
                state.calendarRight[0].target = this;
                var val = $(target).daterangebox('getValue').split(" - ");
                if(val){
                    //改动之三
                    if(dateTypeRange == "d"){
                        state.calendarLeft.datebox('setValue',val[0]).combo('setText',val[0]);
                        state.calendarRight.datebox('setValue',val[1]).combo('setText',val[1]);
                    }else{
                        state.calendarLeft.datetimebox('setValue',val[0]).combo('setText',val[0]);
                        state.calendarRight.datetimebox('setValue',val[1]).combo('setText',val[1]);
                    }

                }
            },
            required:state.options.required
        }));
        //
        $(target).combo('textbox').attr('readonly',true);

        createRoot(target);

    }


    /**
     * 构造方法.
     */
    $.fn.daterangebox = function(options, param){

        if (typeof options == 'string'){
            var method = $.fn.daterangebox.methods[options];
            if (method){
                //当 method 是"daterangebox"定义的方法是,直接调用.
                return method(this, param);
            } else {
                //否则,调用combo对应的方法.
                return this.combo(options, param);
            }
        }

        options = options || {};

        return this.each(function(){

            var state = $.data(this, 'daterangebox');
            if (state){
                $.extend(state.options, options);
            } else {
                //在元素上存放(set)数据. 除了'cloneFrom'方法外,其他地方都是获取(get).
                $.data(this, 'daterangebox', {
                    // 拷贝 $.fn.daterangebox.defaults 数据.
                    options: $.extend({}, $.fn.daterangebox.defaults, $.fn.daterangebox.parseOptions(this), options)
                });
            }
            createBox(this);
        });
    };

    //getValues
    function _2e(_2f) {
        var _30 = [];
        var _31 = $.data(_2f, "combo").combo;
        var temp = _31.find(".textbox-value");
        var flag = temp.val();
        _30 = flag.split(" - ");
        return _30;
    };

    //setValues
    function _32(_33, _34) {
        // debugger
        var _35 = $.data(_33, "combo");
        var _36 = _35.options;
        var _37 = _35.combo;
        if (!$.isArray(_34)) {
            _34 = _34.split(_36.separator);
        }
    };

    //setValue
    function _3f(_40, _41) {
        _32(_40, [_41]);
    };

    $.fn.daterangebox.methods = {

        //测试发现,'options'方法在内部调用非常频繁.
        options: function(jq){
            var copts = jq.combo('options');
            return $.extend($.data(jq[0], 'daterangebox').options, {
                width: copts.width,
                height: copts.height,
                originalValue: copts.originalValue,
                disabled: copts.disabled,
                readonly: copts.readonly
            });
        }, setValues: function (jq, _4f) {
            return jq.each(function () {
                _32(this, _4f);
            });
        }, getValues: function (jq) {
            return _2e(jq[0]);
        }, setValue: function (jq, _50) {
            return jq.each(function () {
                _3f(this, _50);
            });
        }
    };

    //此方法可提供给子类使用.譬如下面的"$.fn.combo.parseOptions(target)".
    $.fn.daterangebox.parseOptions = function(target){
        return $.extend({}, $.fn.combo.parseOptions(target), $.parser.parseOptions(target));
    };

    $.fn.daterangebox.defaults = $.extend({}, $.fn.combo.defaults, {
        panelWidth:'auto',//宽度初始值为400
        panelHeight:'auto',

        formatter:function(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return (m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+y;
        },
        onSelect:function(date){
        }
    });
})(jQuery);

4.2、修改easyloader.js文件

将 src 目录下的 easyloader.js 拷贝到根目录下,并作如下修改

(function(){
	var modules = {
		daterangebox:{
			js:'jquery.daterangebox.js',
			dependencies:['datebox','timespinner','datetimebox']
		},

4.3、新增测试入口页面

在 my 目录下增加测试文件 test.html, my目录自己创建即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>daterangebox</title>

    <!-- 1.4.2 -->
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../easyloader.js"></script>

    <script type="text/javascript">
        //
        $(function(){

            var input1 = $('<input>').appendTo($('body')).attr('id', 'dd').attr('type','text').css('width','280px');

            easyloader.locale = "zh_CN";
            easyloader.base = "../";
            using('daterangebox', function(){
                $('#dd').daterangebox({required:false});
            });
        });
    </script>
</head>
<body>

</body>
</html>

4.4、修改系统文件

要让例子程序正确运行,还需要修改下plugin目录下的jquery.combo.js文件. 原因是目前项目用的是低版本1.4.2见博文

//_21.panel("panel").show().css({zIndex:($.fn.menu?$.fn.menu.defaults.zIndex++:$.fn.window.defaults.zIndex++),left:-999999});
_21.panel("panel").show().css({zIndex:($.fn.menu?$.fn.menu.defaults.zIndex++:($.fn.window?$.fn.window.defaults.zIndex++:99)),left:-999999});

4.5、END 运行你的入口文件即可。

使用过程中如遇问题，欢迎大家留言更正。