Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能

 

自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能。显示效果如一下

是不是非常实用

引用的jquery 组件是 Date Range Picker / http://www.daterangepicker.com/

 

自定义扩展easyui datagird filter，参考代码如一下

 

 

$.extend($.fn.datagrid.defaults.filters, {
    dateRange: {
        init: function (container, options) {
            var cc = $('<span class="textbox combo datebox"><span class="textbox-addon textbox-addon-right" style="right: 0px; top: 1px;"><a href="javascript:" class="textbox-icon combo-arrow" icon-index="0" tabindex="-1" style="width: 18px; height: 22px;"></a></span></span>').appendTo(container);
            var input = $('<input type="text" style="border:0px">').appendTo(cc);
            var myoptions = {
                applyClass: 'btn-sm btn-success',
                cancelClass: 'btn-sm btn-default',
                locale: {
                    applyLabel: '确认',
                    cancelLabel: '清空',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    firstDay: 1,
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],  
                },
                ranges: {
                    
                    //'最近1小时': [moment().subtract('hours',1), moment()],
                    '今日': [moment(), moment()],
                    '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    '最近7日': [moment().subtract(6,'days'), moment()],
                    '最近30日': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf("month"), moment().endOf("month")],
                    '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                },
                opens: 'right',    // 日期选择框的弹出位置
                separator: '-',
                showWeekNumbers: false,     // 是否显示第几周
                format: 'MM/DD/YYYY'
            }
            input.daterangepicker(myoptions);
            container.find('.textbox-icon').on('click', function () {
                container.find('input').trigger('click.daterangepicker');
            });
            if (options.onChange == undefined) {
                console.log('Can not find function:onChange for', input[0]);
            }
            else {
                input.on('cancel.daterangepicker', function (ev, picker) {
                    $(this).val('');
                    options.onChange('');
                });
                input.on('apply.daterangepicker', function (ev, picker) {
                    options.onChange(picker.startDate.format('MM/DD/YYYY') +'-'+ picker.endDate.format('MM/DD/YYYY'));
                });
            }
            
            
            return input;
        },
        destroy: function (target) {
            $(target).daterangepicker('destroy');
        },
        getValue: function (target) {
            return $(target).daterangepicker('getValue') ;
        },
        setValue: function (target, value) {
           
            $(target).daterangepicker('setValue', value);
           
        },
        resize: function (target, width) {
            $(target)._outerWidth(width)._outerHeight(24);
           // $(target).daterangepicker('resize', width / 2);
        }
    }
});

　　

 

Datagrid 开启filter功能 参考代码如一下

 

 

$(function () {

            $dg.datagrid("enableFilter", [
                

                {
                    field: "StartDate",
                    type: "dateRange",
                    options: {
                        onChange: function (value) {
                            $dg.datagrid("addFilterRule", {
                                field: "StartDate",
                                op: "between",
                                value: value
                            });

                            $dg.datagrid("doFilter");
                        }
                    }
                },
                {
                    field: "EndDate",
                    type: "dateRange",
                    options: {
                        onChange: function (value) {
                            $dg.datagrid("addFilterRule", {
                                field: "EndDate",
                                op: "between",
                                value: value
                            });

                            $dg.datagrid("doFilter");
                        }
                    }
                },


            ]);
        })

　　

后台代码如一下

 if (rule.field == "StartDate" && !string.IsNullOrEmpty(rule.value))
                    {
                        if (rule.op == "between")
                        {
                            var datearray = rule.value.Split(new char[] { '-' });
                            var start = Convert.ToDateTime(datearray[0]);
                            var end = Convert.ToDateTime(datearray[1]);

                            And(x => SqlFunctions.DateDiff("d", start, x.StartDate) >= 0);
                            And(x => SqlFunctions.DateDiff("d", end, x.StartDate) <= 0);
                        }
                    }





                    if (rule.field == "EndDate" && !string.IsNullOrEmpty(rule.value))
                    {
                        if (rule.op == "between")
                        {
                            var datearray = rule.value.Split(new char[] { '-' });
                            var start = Convert.ToDateTime(datearray[0]);
                            var end = Convert.ToDateTime(datearray[1]);

                            And(x => SqlFunctions.DateDiff("d", start, x.EndDate) >= 0);
                            And(x => SqlFunctions.DateDiff("d", end, x.EndDate) <= 0);
                        }
                    }