daterange filteron materials

app/assets/scripts/main.js

@@ -87,7 +87,7 @@
             checktoggle();
         });
 
-        if ($("*").is('#datefilter')) {
+        if ($('#datefilter').length) {
             $('#datefilter').dateRangePicker({
                 autoClose: true,
                 language: 'ru',
@@ -96,6 +96,9 @@
                 getValue: function () {
                     return document.getElementById('datefiltertext').innerHTML;
                 }, setValue: function (s) {
+                    var dates = s.split(' - ');
+                    $('.newsfilter__date-from').val(dates[0]);
+                    $('.newsfilter__date-to').val(dates[1]);
                     document.getElementById('datefiltertext').innerHTML = s;
                 }
             });

app/assets/styles/scripts/daterangepicker.scss

@@ -1,10 +1,9 @@
 .date-picker {
     width: 170px;
     height: 25px;
-    padding: 0;
     border: 0;
     line-height: 25px;
-    padding-left: 10px;
+    padding: 0 0 0 10px;
     font-size: 12px;
     font-family: Arial, sans-serif;
     font-weight: bold;
@@ -17,7 +16,6 @@
 .date-picker-wrapper {
     position: absolute;
     margin-top: 10px;
-    z-index: 1;
     border: 1px solid #c8c8c8;
     background-color: #ebebeb;
     padding: 5px 12px 0 12px;
@@ -25,11 +23,11 @@
     line-height: 20px;
     color: #aaa;
     font-family: Arial, sans-serif;
-    box-sizing: initial;
     max-height: 280px;
     overflow: hidden;
     margin-left: 170px;
     box-sizing: border-box;
+    z-index: 2;
 }
 
 .date-picker-wrapper.inline-wrapper {
@@ -45,12 +43,10 @@
 }
 
 .date-picker-wrapper.no-shortcuts {
-    padding-bottom: 5px;
     padding-bottom: 0;
 }
 
 .date-picker-wrapper.no-topbar {
-    padding-top: 12px;
     padding-top: 0;
     padding-bottom: 8px;
 }
@@ -99,13 +95,12 @@
     vertical-align: middle;
     text-align: center;
     line-height: 30px;
-    margin: 0px;
-    padding: 2px 0px;
+    margin: 0;
+    padding: 2px 0;
 }
 
 .date-picker-wrapper .month-wrapper table .day {
     padding: 0;
-    line-height: 1;
     font-size: 12px;
     margin-bottom: 1px;
     color: #929292;
@@ -187,7 +182,6 @@
     position: relative;
     z-index: 1;
     width: 15px;
-    height: 100%;
     background-color: red;
     font-size: 0;
     line-height: 0;
@@ -221,7 +215,7 @@
 .date-picker-wrapper .gap .gap-line .gap-2 {
     position: absolute;
     right: 0;
-    top: 0px;
+    top: 0;
     z-index: 2;
     height: 0;
     border-left: 8px solid transparent;
@@ -299,14 +293,13 @@
 
 .date-picker-wrapper .drp_top-bar .apply-btn {
     position: absolute;
-    right: 0px;
+    right: 0;
     top: 6px;
     padding: 3px 5px;
     margin: 0;
     font-size: 12px;
     border-radius: 4px;
     cursor: pointer;
-    color: #d9eef7;
     border: solid 1px #0076a3;
     background: #0095cd;
     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));

app/www/css/all.css

@@ -4705,10 +4705,9 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker {
   width: 170px;
   height: 25px;
-  padding: 0;
   border: 0;
   line-height: 25px;
-  padding-left: 10px;
+    padding: 0 0 0 10px;
   font-size: 12px;
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -4720,7 +4719,6 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker-wrapper {
   position: absolute;
   margin-top: 10px;
-  z-index: 1;
   border: 1px solid #c8c8c8;
   background-color: #ebebeb;
   padding: 5px 12px 0 12px;
@@ -4728,11 +4726,12 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   line-height: 20px;
   color: #aaa;
   font-family: Arial, sans-serif;
-  box-sizing: initial;
   max-height: 280px;
   overflow: hidden;
   margin-left: 170px;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+    z-index: 2;
+}
 
 .date-picker-wrapper.inline-wrapper {
   position: relative;
@@ -4745,11 +4744,9 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   margin-left: 0px; }
 
 .date-picker-wrapper.no-shortcuts {
-  padding-bottom: 5px;
   padding-bottom: 0; }
 
 .date-picker-wrapper.no-topbar {
-  padding-top: 12px;
   padding-top: 0;
   padding-bottom: 8px; }
 
@@ -4789,12 +4786,12 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   vertical-align: middle;
   text-align: center;
   line-height: 30px;
-  margin: 0px;
-  padding: 2px 0px; }
+    margin: 0;
+    padding: 2px 0;
+}
 
 .date-picker-wrapper .month-wrapper table .day {
   padding: 0;
-  line-height: 1;
   font-size: 12px;
   margin-bottom: 1px;
   color: #929292;
@@ -4862,7 +4859,6 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
   position: relative;
   z-index: 1;
   width: 15px;
-  height: 100%;
   background-color: red;
   font-size: 0;
   line-height: 0;
@@ -4892,7 +4888,7 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 .date-picker-wrapper .gap .gap-line .gap-2 {
   position: absolute;
   right: 0;
-  top: 0px;
+    top: 0;
   z-index: 2;
   height: 0;
   border-left: 8px solid transparent;
@@ -4957,14 +4953,13 @@ body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object
 
 .date-picker-wrapper .drp_top-bar .apply-btn {
   position: absolute;
-  right: 0px;
+    right: 0;
   top: 6px;
   padding: 3px 5px;
   margin: 0;
   font-size: 12px;
   border-radius: 4px;
   cursor: pointer;
-  color: #d9eef7;
   border: solid 1px #0076a3;
   background: #0095cd;
   background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));