diff --git a/package.json b/package.json
index 6577b974e..207ab0351 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#46f086c",
     "countup.js": "2.0.4",
+    "daterangepicker": "3.0.5",
     "fullcalendar": "3.10.1",
     "imask": "6.0.1",
     "jquery": "3.4.1",
diff --git a/pages/_data/libs.json b/pages/_data/libs.json
index b3e6824a5..a9537bc95 100644
--- a/pages/_data/libs.json
+++ b/pages/_data/libs.json
@@ -23,6 +23,10 @@
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
     ],
+    "daterangepicker": [
+      "daterangepicker/moment.min.js",
+      "daterangepicker/daterangepicker.js"
+    ],
     "countup": "countup.js/dist/countUp.min.js"
   },
   "css": {
@@ -33,6 +37,7 @@
       "@fullcalendar/daygrid/main.min.css",
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
-    ]
+    ],
+    "daterangepicker": "daterangepicker/daterangepicker.css"
   }
 }
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index dd034fe76..00da6780f 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -8,4 +8,5 @@
 {% endfor %}
 
 <!-- Tabler Core -->
+
 <script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
diff --git a/pages/tmp.html b/pages/tmp.html
index bd2867311..00dc727aa 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -58,4 +58,13 @@ menu: a.b.c
 		{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
 	</div>
 </div>
-
+<div class="row">
+   <div class="col-10 col-sm-8 col-md-6 col-lg-4">
+      <div class="card">
+         <div class="card-body d-flex justify-content-between table-responsive">
+            <p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
+            <input type="text" name="dates" class="form-control text-center ml-4" size="20">
+         </div>
+      </div>
+   </div>
+</div>
\ No newline at end of file
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 38d47342f..11b78db14 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -35,6 +35,9 @@ Form control
     color: $text-muted;
     user-select: none;
   }
+  &[size]{
+    width: auto;
+  }
 }
 
 .form-control-light {