first daterangepicker element added

build/rollup.config.js

@@ -39,6 +39,7 @@ module.exports = {
   input: {
     tabler: path.resolve(__dirname, '../js/tabler.js'),
     'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+    'daterangepicker': path.resolve(__dirname,'../js/daterangepicker.js')
   },
   output: {
     banner,

js/daterangepicker.js

@@ -0,0 +1 @@
+$('input[name="dates"]').daterangepicker();

package.json

@@ -107,6 +107,7 @@
     "apexcharts": "3.10.1",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#76fd85b",
+    "daterangepicker": "3.0.5",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",

pages/_data/libs.json

@@ -18,7 +18,10 @@
     "@fullcalendar/daygrid/main.min.js",
     "@fullcalendar/interaction/main.min.js",
     "@fullcalendar/timegrid/main.min.js",
-    "@fullcalendar/list/main.min.js"
+    "@fullcalendar/list/main.min.js",
+
+    "daterangepicker/moment.min.js",
+    "daterangepicker/daterangepicker.js"
   ],
   "css": [
     "jqvmap/dist/jqvmap.min.css",
@@ -27,6 +30,8 @@
     "@fullcalendar/core/main.min.css",
     "@fullcalendar/daygrid/main.min.css",
     "@fullcalendar/timegrid/main.min.css",
-    "@fullcalendar/list/main.min.css"
+    "@fullcalendar/list/main.min.css",
+
+    "daterangepicker/daterangepicker.css"
   ]
 }

pages/_includes/layout/js.html

@@ -16,3 +16,5 @@
 
 <!-- Tabler Plugins -->
 <script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
+
+<script src="{{ site.base }}/dist/js/daterangepicker{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>

pages/tmp.html

@@ -30,4 +30,13 @@
       {% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
    </div>
 </div>
-
+<div class="row">
+   <div class="col-md-6">
+      <div class="card">
+         <div class="card-body d-flex justify-content-between">
+            <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">
+         </div>
+      </div>
+   </div>
+</div>