diff --git a/app_search_range/__init__.py b/app_search_range/__init__.py
new file mode 100644
index 00000000..7c68785e
--- /dev/null
+++ b/app_search_range/__init__.py
@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-
\ No newline at end of file
diff --git a/app_search_range/__openerp__.py b/app_search_range/__openerp__.py
new file mode 100644
index 00000000..b570ff9f
--- /dev/null
+++ b/app_search_range/__openerp__.py
@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+{
+    'name': 'App Search By Date or Number Range',
+    'version': '10.0.1.0',
+    'author': 'odooapp.cn',
+    'category': 'web',
+    'website': 'http://www.sunpop.cn',
+    'sequence': 2,
+    'summary': 'Search by date or number range in List view and Pivot view',
+    'description': """
+
+Search by date or number range in List view and Pivot view
+--------------------------------------------------
+
+    """,
+    'depends': ['web'],
+    'data': [
+        'views/template_view.xml',
+    ],
+    'qweb': [
+        'static/src/xml/*.xml',
+    ],
+    "price": 0.00,
+    "currency": "EUR",
+    
+    'images': ['static/description/list_pivot.png'],
+
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}
diff --git a/app_search_range/i18n/zh_CN.po b/app_search_range/i18n/zh_CN.po
new file mode 100644
index 00000000..e4d12cd3
--- /dev/null
+++ b/app_search_range/i18n/zh_CN.po
@@ -0,0 +1,155 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+#	* app_odoo_customize
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0c\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2017-08-07 08:57+0000\n"
+"PO-Revision-Date: 2017-08-07 08:57+0000\n"
+"Last-Translator: Ivan Deng <300883@qq.com>, 2017\n"
+"Language-Team: http://www.sunpop.cn \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Language: zh_CN\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_system_name
+msgid "System Name"
+msgstr "系统名称"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "Online Support"
+msgstr "系统支持"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_lang
+msgid "Show Quick Language Switcher"
+msgstr "显示快速多语言切换"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_debug
+msgid "Show Quick Debug"
+msgstr "显示快速调试"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_documentation
+msgid "Show Documentation"
+msgstr "显示文档"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_documentation_dev
+msgid "Show Developer Documentation"
+msgstr "显示开发者文档"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_support
+msgid "Show Support"
+msgstr "显示支持"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_account
+msgid "Show My Account"
+msgstr "显示我的帐户"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_enterprise
+msgid "Show Enterprise Tag"
+msgstr "显示升级企业版标签提醒"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_share
+msgid "Show Share Dashboard"
+msgstr "显示分享Odoo"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_show_poweredby
+msgid "Show Powered by Odoo"
+msgstr "显示Powered by Odoo"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_documentation_url
+msgid "Documentation Url"
+msgstr "文档链接"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_documentation_dev_url
+msgid "Developer Documentation Url"
+msgstr "开发者手册链接"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_support_url
+msgid "Support Url"
+msgstr "支持链接"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_account_title
+msgid "My Odoo.com Account Title"
+msgstr "我的帐户显示标题"
+
+#. module: Base
+#: model:ir.config_parameter,value:app_odoo_customize.app_account_title
+#, python-format
+msgid "My Online Account"
+msgstr "我的帐号"
+
+#. module: app_odoo_customize
+#: model:ir.config_parameter,value:app_odoo_customize.app_account_title
+#, python-format
+msgid "My Online Account"
+msgstr "我的帐号"
+
+#. module: app_odoo_customize
+#: model:ir.model.fields,field_description:app_odoo_customize.field_app_theme_config_settings_app_account_url
+msgid "My Odoo.com Account Url"
+msgstr "我的帐户链接"
+
+
+#. module: app_odoo_customize
+#. openerp-web
+#: code:addons/app_odoo_customize/static/src/xml/customize_user_menu.xml:16
+#, python-format
+msgid "Developer Manual"
+msgstr "开发者手册"
+
+#. module: app_odoo_customize
+#: model:ir.actions.act_window,name:app_odoo_customize.action_app_theme_config
+#: model:ir.ui.menu,name:app_odoo_customize.menu_app_theme_config
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "odooApp Settings"
+msgstr "odooApp 设置"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "White Label Setting"
+msgstr "个性化Odoo设置"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "Apply"
+msgstr "应用"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "Cancel"
+msgstr "取消"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "User Menu"
+msgstr "用户菜单"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "Item to Show	"
+msgstr "显示/隐藏菜单项"
+
+#. module: app_odoo_customize
+#: model:ir.ui.view,arch_db:app_odoo_customize.view_app_theme_config_settings
+msgid "User Menu Content"
+msgstr "菜单项具体操作设置"
diff --git a/app_search_range/static/description/date_range.png b/app_search_range/static/description/date_range.png
new file mode 100644
index 00000000..4ad83676
Binary files /dev/null and b/app_search_range/static/description/date_range.png differ
diff --git a/app_search_range/static/description/icon.png b/app_search_range/static/description/icon.png
new file mode 100644
index 00000000..2d1103b7
Binary files /dev/null and b/app_search_range/static/description/icon.png differ
diff --git a/app_search_range/static/description/index.html b/app_search_range/static/description/index.html
new file mode 100644
index 00000000..dae90dd5
--- /dev/null
+++ b/app_search_range/static/description/index.html
@@ -0,0 +1,20 @@
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan" style="color:#875A7B;">Date range</h2>
+        <div class="oe_demo oe_picture oe_screenshot">
+            <img src="date_range.png">
+        </div>
+    </div>
+</section>
+
+<section class="oe_container oe_dark">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan" style="color:#875A7B;">Value range</h2>
+        <div class="oe_demo oe_picture oe_screenshot">
+            <img src="value_range.png">
+        </div>
+    </div>
+</section>
+
+<section class="oe_container oe_separator">
+</section>
\ No newline at end of file
diff --git a/app_search_range/static/description/list_pivot.png b/app_search_range/static/description/list_pivot.png
new file mode 100644
index 00000000..0e3613e1
Binary files /dev/null and b/app_search_range/static/description/list_pivot.png differ
diff --git a/app_search_range/static/description/value_range.png b/app_search_range/static/description/value_range.png
new file mode 100644
index 00000000..c0808876
Binary files /dev/null and b/app_search_range/static/description/value_range.png differ
diff --git a/app_search_range/static/src/css/main.css b/app_search_range/static/src/css/main.css
new file mode 100644
index 00000000..673b57ff
--- /dev/null
+++ b/app_search_range/static/src/css/main.css
@@ -0,0 +1,11 @@
+.tree_search_item {
+    cursor: pointer;
+}
+
+.tree_search_item .selected a:before {
+    font-family: FontAwesome;
+    position: absolute;
+    left: 6px;
+    top: 3px;
+    content: "";
+}
\ No newline at end of file
diff --git a/app_search_range/static/src/js/pivot.js b/app_search_range/static/src/js/pivot.js
new file mode 100644
index 00000000..0568135e
--- /dev/null
+++ b/app_search_range/static/src/js/pivot.js
@@ -0,0 +1,235 @@
+odoo.define('app_search_range_range.pivot', function (require) {
+"use strict";
+
+var time        = require('web.time');
+var core        = require('web.core');
+var data        = require('web.data');
+var session     = require('web.session');
+var utils       = require('web.utils');
+var Model       = require('web.Model');
+var PivotView   = require('web.PivotView');
+var datepicker  = require('web.datepicker');
+
+var _t = core._t;
+var _lt = core._lt;
+var QWeb = core.qweb;
+
+PivotView.include({
+
+    init: function() {
+        this._super.apply(this, arguments);        
+        this.ts_fields = [];
+    },
+
+    tgl_on_button_click: function (event) {
+        var self = this;
+        var $target = $(event.target), 
+            field, key, first_item;
+
+        field   = $target.parent().data('field');
+        key     = $target.parent().data('key');
+
+        if (field == -1) {
+            first_item = $target.parent().parent().children('.tgl_first_item.selected');   
+            if (!first_item.length) {
+                $target.parent().parent().children('li').removeClass('selected')
+            }
+        } else {
+            first_item = $target.parent().parent().children('.tgl_first_item').removeClass('selected');
+        }
+
+        $target.parent().toggleClass('selected');
+        this.tgl_search()
+        event.stopPropagation();
+
+    },
+
+
+    render_buttons: function($node) {
+        var self = this;
+        var ts_context = this.context.tree_search;
+
+        this._super.apply(this, arguments);
+
+        var l10n = _t.database.parameters;
+        var datepickers_options = {
+            pickTime: false,
+            startDate: moment({ y: 1900 }),
+            endDate: moment().add(200, "y"),
+            calendarWeeks: true,
+            icons : {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down'
+               },
+            language : moment.locale(),
+            format : time.strftime_to_moment_format(l10n.date_format),
+        }
+
+        // self.$buttons.find('.app-search').remove();
+
+        var app_fields = [];
+        _.each(self.fields, function(value, key, list){
+            if (value.store && value.type === "datetime" || value.type === "date") {
+                app_fields.push([key, value.string]);
+            }
+        });
+
+        if (app_fields.length > 0) {
+            self.$search_button = $(QWeb.render('odooApp.buttons', {'app_fields': app_fields}))
+            self.$search_button.find('.app_start_date').datetimepicker(datepickers_options);
+            self.$search_button.find('.app_end_date').datetimepicker(datepickers_options);
+            self.$search_button.find('.app_start_date').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.find('.app_end_date').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.find('.app_select_field').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.appendTo($node);
+        }     
+
+        app_fields = [];
+        _.each(self.fields, function(value, key, list){
+            if (value.string && value.string.length > 1 && value.store && (value.type === "integer" || value.type === "float" || value.type === "monetary")) {
+                app_fields.push([key, value.string]);
+            }
+        });
+
+
+        if (app_fields.length > 0) {
+            self.$search_range = $(QWeb.render('odooApp.SearchRange', {'app_fields': app_fields}))
+            self.$search_range.find('.app_select_range_field').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.find('.app_start_range').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.find('.app_end_range').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.appendTo($node);
+        }    
+
+        // Dropdown list cho phep chon nhieu
+
+        $(QWeb.render("TGL.TreeSearch.Placeholder", {})).appendTo($node);
+
+        _.each(ts_context, function(item){
+
+            var field = _.find(self.fields, function(value, key, list){
+                return value.type == 'many2one' && value.relation && key === item.name;
+            });
+
+        //     _.each(self.fields, function(value, key, list){
+        //     if (value.string && value.string.length > 1 && value.store && (value.type === "integer" || value.type === "float")) {
+        //         app_fields.push([value.name, value.string]);
+        //     }
+        // });
+
+            if (field) {
+                self.ts_fields.push(item.name);
+
+                new Model(field.relation).query(['id', 'display_name']).filter(new data.CompoundDomain(item.domain, field.domain)).context(new data.CompoundContext()).order_by('app_sequence').all().then(function (result) {
+                    var $multi_search = $(QWeb.render("TGL.TreeSearch.Item", {'widget': {
+                        'string': item.string,
+                        'key': item.name,
+                        'class_name': 'app_multi_item_' + item.name,
+                        'fields': result,
+                    }}))
+
+                    $multi_search.find('li').click(self.tgl_on_button_click.bind(self));
+
+                    setTimeout(function(){ 
+                        $multi_search.appendTo($('.treesearch_placeholder')); 
+                    }, 3000);
+
+                   
+                });
+            }
+        });
+
+    },  
+
+    do_search: function(domain, context, group_by) {        
+        var self = this;
+        this.last_domain = domain;
+        this.last_context = context;
+        this.last_group_by = group_by;
+        this.old_search = _.bind(this._super, this);
+        return self.tgl_search();
+    },
+
+    tgl_search: function() {
+        var self = this;
+        var domain = [], value, value_tmp;
+
+        _.each(self.ts_fields, function(field){
+            value = $('.app_item_' + field).val();
+
+            var select_fields = $('.app_multi_item_' + field).children('.selected'),
+                select_value = [];
+            if (select_fields.length > 0) {
+                _.each(select_fields, function(item){
+                    value_tmp = $(item).data('field');
+                    if (value_tmp > 0) {
+                        select_value.push($(item).data('field'));
+                    }
+                });
+                if (select_value.length) {
+                    domain.push([field, 'in', select_value]);
+                }
+
+            }
+            // if (value) {
+            //     value_tmp = parseInt(value);
+            //     if (value_tmp != 0) {
+            //         domain.push([field,'=',value_tmp]);
+            //     } else {
+            //         domain.push([field,'!=', false]);
+            //     }
+            // }
+        });
+
+        if (self.$search_button) {
+            var start_date  = self.$search_button.find('.app_start_date').val(),
+                end_date    = self.$search_button.find('.app_end_date').val(),
+                field       = self.$search_button.find('.app_select_field').val();
+            
+            var l10n = _t.database.parameters;
+            if (start_date) {
+                start_date = moment(moment(start_date, time.strftime_to_moment_format(l10n.date_format))).format('YYYY-MM-DD');
+                domain.push([field, '>=', start_date]);
+            }
+            if (end_date) {
+                end_date = moment(moment(end_date, time.strftime_to_moment_format(l10n.date_format))).format('YYYY-MM-DD');
+                domain.push([field, '<=', end_date]);
+            }
+
+        }
+
+        if (self.$search_range) {
+            var start_range  = self.$search_range.find('.app_start_range').val(),
+                end_range    = self.$search_range.find('.app_end_range').val(),
+                range_field  = self.$search_range.find('.app_select_range_field').val();
+
+            if (start_range) {
+                domain.push([range_field, '>=', parseInt(start_range)]);
+            }
+            if (end_range) {
+                domain.push([range_field, '<=', parseInt(end_range)]);
+            }
+        }
+        // console.log(domain);
+        var compound_domain = new data.CompoundDomain(self.last_domain, domain);
+        self.dataset.domain = compound_domain.eval();
+        return self.old_search(compound_domain, self.last_context, self.last_group_by);
+    },
+
+
+});
+
+});
\ No newline at end of file
diff --git a/app_search_range/static/src/js/tree.js b/app_search_range/static/src/js/tree.js
new file mode 100644
index 00000000..1cae26ad
--- /dev/null
+++ b/app_search_range/static/src/js/tree.js
@@ -0,0 +1,250 @@
+odoo.define('app_search_range_range.tree', function (require) {
+"use strict";
+
+var time        = require('web.time');
+var core        = require('web.core');
+var data        = require('web.data');
+var session     = require('web.session');
+var utils       = require('web.utils');
+var Model       = require('web.Model');
+var ListView   = require('web.ListView');
+var datepicker  = require('web.datepicker');
+var ViewManager = require('web.ViewManager')
+var _t = core._t;
+var _lt = core._lt;
+var QWeb = core.qweb;
+
+ListView.include({
+
+    init: function(parent, dataset, view_id, options) {
+        this._super.apply(this, arguments);
+        this.ts_context = dataset.context.tree_search;
+        this.fields_range = dataset.context.fields_range;
+        this.ts_fields = [];
+    },
+
+    on_button_click: function (event) {
+        var self = this;
+        var $target = $(event.target), 
+            field, key, first_item;
+
+        field   = $target.parent().data('field');
+        key     = $target.parent().data('key');
+
+        if (field == -1) {
+            first_item = $target.parent().parent().children('.tgl_first_item.selected');   
+            if (!first_item.length) {
+                $target.parent().parent().children('li').removeClass('selected')
+            }
+        } else {
+            first_item = $target.parent().parent().children('.tgl_first_item').removeClass('selected');
+        }
+
+        $target.parent().toggleClass('selected');
+        this.tgl_search()
+        event.stopPropagation();
+
+    },
+
+    render_buttons: function($node) {
+        var self = this;
+        this._super.apply(this, arguments);
+
+        var l10n = _t.database.parameters;
+        var datepickers_options = {
+            pickTime: false,
+            startDate: moment({ y: 1900 }),
+            endDate: moment().add(200, "y"),
+            calendarWeeks: true,
+            icons : {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down'
+               },
+            language : moment.locale(),
+            format : time.strftime_to_moment_format(l10n.date_format),
+        }
+
+        self.$buttons.find('.app-search').remove();
+
+        // Tim kiem theo khoang thoi gian
+
+        var app_fields = [];
+        _.each(self.columns, function(value, key, list){
+            if (value.store && value.type === "datetime" || value.type === "date") {
+                app_fields.push([value.name, value.string]);
+            }
+        });
+        if (app_fields.length > 0) {
+            self.$search_button = $(QWeb.render('odooApp.buttons', {'app_fields': app_fields}))
+            self.$search_button.find('.app_start_date').datetimepicker(datepickers_options);
+            self.$search_button.find('.app_end_date').datetimepicker(datepickers_options);
+            // self.$search_button.find('.app_search_date_rate').click(function() {
+            //     self.tgl_search();
+            // });
+            self.$search_button.find('.app_start_date').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.find('.app_end_date').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.find('.app_select_field').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_button.appendTo(self.$buttons);
+        }        
+
+
+        app_fields = [];
+        _.each(self.columns, function(value, key, list){
+            if (value.string && value.string.length > 1 && value.store && (value.type === "integer" || value.type === "float" || value.type === "monetary")) {
+                app_fields.push([value.name, value.string]);
+            }
+        });
+
+        if (app_fields.length == 0) {
+            if (self.fields_range) {
+                app_fields = self.fields_range;
+            }
+        }
+
+        if (app_fields.length > 0) {
+            self.$search_range = $(QWeb.render('odooApp.SearchRange', {'app_fields': app_fields}))
+            // self.$search_range.find('.app_search_date_range').click(function() {
+            //     self.tgl_search();
+            // });
+            self.$search_range.find('.app_select_range_field').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.find('.app_start_range').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.find('.app_end_range').on('change', function() {
+                self.tgl_search();
+            });
+            self.$search_range.appendTo(self.$buttons);
+        }    
+
+        // Dropdown list cho phep chon nhieu
+        _.each(this.ts_context, function(item){
+            var field = _.find(self.columns, function(column){
+                return column.type == 'many2one' && column.relation && column.name === item.name;
+            });
+            if (field) {
+                self.ts_fields.push(item.name);
+                new Model(field.relation).query(['id', 'display_name']).filter(new data.CompoundDomain(item.domain, field.domain)).context(new data.CompoundContext()).all().then(function (result) {
+                    // var single_search = $(QWeb.render('odooApp.selection', {
+                    //     'string': item.string,
+                    //     'class_name': 'app_item_' + item.name,
+                    //     'fields': result,
+                    // }));
+                    if (!$('.after_control_panel').length) {
+                        // $(QWeb.render('odooApp.after_control_panel', {})).appendTo($('.o_control_panel'));
+                        // $(QWeb.render('odooApp.after_control_panel', {})).appendTo($('.o_cp_left'));
+                        
+                        // $(QWeb.render('odooApp.after_control_panel', {})).appendTo(self.$buttons);
+
+                        var multi_search = $(QWeb.render("TGL.TreeSearch.Item", {'widget': {
+                            'string': item.string,
+                            'key': item.name,
+                            'class_name': 'app_multi_item_' + item.name,
+                            'fields': result,
+                        }}))
+
+                        multi_search.find('li').click(self.on_button_click.bind(self));
+                        multi_search.appendTo(self.$buttons);
+                    }
+                    // single_search.appendTo($('.after_control_panel'));
+                    // $('.app_item_' + item.name).on('change', function() {
+                    //     self.tgl_search();
+                    // })
+                });
+            }
+        });
+// {'tree_search': [{'string': 'Địa điểm', 'name': 'location_id', 'domain': [('usage', '=', 'internal')]}, {'string': 'Nhóm sản phẩm', 'name': 'categ_id', 'domain': []}]}        
+// {'search_default_sales': 1, 'tree_search': [{'string': 'Địa điểm', 'name': 'location_id', 'domain': [('usage', '=', 'internal')]}, {'string': 'NV bán hàng', 'name': 'user_id', 'domain': []}]}        
+// {'tree_search': [{'string': 'Địa điểm', 'name': 'location_id', 'domain': [('usage', '=', 'internal')]}]}
+        // var a = $(QWeb.render('odooApp.selection', {'class_name': 'abc','fields': [['1', '1'], ['2', '2']]}));
+        // a.appendTo(self.$buttons);
+
+    },  
+
+    do_search: function(domain, context, group_by) {
+        var self = this;
+        this.last_domain = domain;
+        this.last_context = context;
+        this.last_group_by = group_by;
+        this.old_search = _.bind(this._super, this);
+        return self.tgl_search();
+    },
+
+    tgl_search: function() {
+        var self = this;
+        var domain = [], value, value_tmp;
+
+        _.each(self.ts_fields, function(field){
+            value = $('.app_item_' + field).val();
+
+            var select_fields = $('.app_multi_item_' + field).children('.selected'),
+                select_value = [];
+            if (select_fields.length > 0) {
+                _.each(select_fields, function(item){
+                    value_tmp = $(item).data('field');
+                    if (value_tmp > 0) {
+                        select_value.push($(item).data('field'));
+                    }
+                });
+                if (select_value.length) {
+                    domain.push([field, 'in', select_value]);
+                }
+
+            }
+            // if (value) {
+            //     value_tmp = parseInt(value);
+            //     if (value_tmp != 0) {
+            //         domain.push([field,'=',value_tmp]);
+            //     } else {
+            //         domain.push([field,'!=', false]);
+            //     }
+            // }
+        });
+
+        if (self.$search_button) {
+            var start_date  = self.$search_button.find('.app_start_date').val(),
+                end_date    = self.$search_button.find('.app_end_date').val(),
+                field       = self.$search_button.find('.app_select_field').val();
+            
+            var l10n = _t.database.parameters;
+            if (start_date) {
+                start_date = moment(moment(start_date, time.strftime_to_moment_format(l10n.date_format))).format('YYYY-MM-DD');
+                domain.push([field, '>=', start_date]);
+            }
+            if (end_date) {
+                end_date = moment(moment(end_date, time.strftime_to_moment_format(l10n.date_format))).format('YYYY-MM-DD');
+                domain.push([field, '<=', end_date]);
+            }
+
+        }
+
+        if (self.$search_range) {
+            var start_range  = self.$search_range.find('.app_start_range').val(),
+                end_range    = self.$search_range.find('.app_end_range').val(),
+                range_field  = self.$search_range.find('.app_select_range_field').val();
+
+            if (start_range) {
+                domain.push([range_field, '>=', parseInt(start_range)]);
+            }
+            if (end_range) {
+                domain.push([range_field, '<=', parseInt(end_range)]);
+            }
+        }
+        // console.log(domain);
+        var compound_domain = new data.CompoundDomain(self.last_domain, domain);
+        self.dataset.domain = compound_domain.eval();
+        return self.old_search(compound_domain, self.last_context, self.last_group_by);
+    },
+
+});
+
+});
\ No newline at end of file
diff --git a/app_search_range/static/src/xml/pivot_view.xml b/app_search_range/static/src/xml/pivot_view.xml
new file mode 100644
index 00000000..624225ff
--- /dev/null
+++ b/app_search_range/static/src/xml/pivot_view.xml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="odooApp.buttons">
+        <div class="app-search btn-group btn-group-sm" >
+            <!-- <div style="margin-left: 10px; margin-top: 2px;"> -->
+            <div style="margin-left: 0px; margin-top: 2px; padding-right: 10px;">
+                <span style="float: left;">
+                  
+                    <select class="app_select_field form-control" style="height: 30px;" >
+                        <option t-foreach="app_fields" t-as="field" t-att-value="field[0]">
+                            <t t-esc="field[1]"/>
+                        </option> 
+                    </select>
+                </span>
+
+                <span style="float: left; margin-left: 2px;">
+                    <input style="height: 30px;" class="app_start_date form-control" size="14" placeholder="Start date" type="text" />
+                </span>
+
+                <span style="float: left; margin-left: 2px;">
+                    <input style="height: 30px;" class="app_end_date form-control" size="14" placeholder="End date" type="text" />
+                </span>
+
+                <!-- <button style="margin-left: 2px; padding: 5px 10px;" class="app_search_date_rate btn btn-primary" title="Field">Lọc</button> -->
+            </div>
+        </div>
+        <!-- <br></br> -->
+    </t>
+
+    <t t-name="odooApp.SearchRange">
+        <div class="app-search btn-group btn-group-sm" >
+            <!-- <div style="margin-left: 10px; margin-top: 2px;"> -->
+            <div style="margin-left: 0px; margin-top: 2px; padding-right: 10px;">
+                <span style="float: left;">
+                  
+                    <select class="app_select_range_field form-control" style="height: 30px;" >
+                        <option t-foreach="app_fields" t-as="field" t-att-value="field[0]">
+                            <t t-esc="field[1]"/>
+                        </option> 
+                    </select>
+                </span>
+
+                <span style="float: left; margin-left: 2px;">
+                    <input style="height: 30px;" class="app_start_range form-control" size="6" placeholder="From" type="text" />
+                </span>
+
+                <span style="float: left; margin-left: 2px;">
+                    <input style="height: 30px;" class="app_end_range form-control" size="6" placeholder="To" type="text" />
+                </span>
+
+                <!-- <button style="margin-left: 2px; padding: 5px 10px;" class="app_search_date_range btn btn-primary" title="Field">Lọc</button> -->
+            </div>
+        </div>
+        <br></br>
+    </t>
+
+    <t t-name="odooApp.after_control_panel">
+        <!-- <div class="after_control_panel" style="width: 100%; text-align: center;" /> -->
+        <div class="after_control_panel" />
+    </t>
+
+    <t t-name="odooApp.selection">
+        <div class=" btn-group btn-group-sm" >
+            <div style="text-align: left">
+                <strong><span t-esc="string"/></strong>
+                <div style="margin-left: 0px; margin-top: 0px;">
+                    
+                    <select t-att-class="class_name" style="height: 30px;" >
+                        <option value="0">All</option>
+                        <option t-foreach="fields" t-as="field" t-att-value="field.id">
+                            <t t-esc="field.display_name"/>
+                        </option> 
+                    </select>
+
+                </div>
+            </div>
+        </div>
+    </t>
+
+   <!--  <t t-extend="PivotView.buttons">
+        <t t-jquery="&gt; :last" t-operation="after">
+            <div class="treesearch_placeholder" />
+        </t>
+    </t> -->
+
+    <t t-name="TGL.TreeSearch.Placeholder">
+        <div class="treesearch_placeholder" />
+    </t>
+
+    <t t-name="TGL.TreeSearch.Item">
+        <div class="btn-group btn-group-sm tree_search_item" style="padding-right: 2px;">
+            <button class="btn btn-primary dropdown-toggle form-control" data-toggle="dropdown">
+               <t t-esc="widget.string" /> <span class="caret"></span>
+            </button>
+            <ul t-att-class="widget.class_name+' dropdown-menu'" style="max-height: 450px; overflow-y: auto;">
+                <li data-field="-1" class="tgl_first_item selected" ><a>All</a></li>
+                <li t-foreach="widget.fields" t-as="value" t-att-data-field="value.id" t-att-data-key="widget.key">
+                    <a><t t-esc="value.display_name"/></a>
+                </li>
+            </ul>
+        </div>
+
+    </t>
+
+
+</templates>
\ No newline at end of file
diff --git a/app_search_range/views/template_view.xml b/app_search_range/views/template_view.xml
new file mode 100644
index 00000000..472ee48a
--- /dev/null
+++ b/app_search_range/views/template_view.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<data>
+    
+    <template id="assets_backend" inherit_id="web.assets_backend">
+      <xpath expr="." position="inside">
+            <link rel="stylesheet" type="text/css" href="/app_search_range/static/src/css/main.css"/>
+          <script type="text/javascript" src="/app_search_range/static/src/js/pivot.js"></script>
+          <script type="text/javascript" src="/app_search_range/static/src/js/tree.js"></script>
+      </xpath>
+    </template>
+
+</data>
+</odoo>
\ No newline at end of file