fix(components): added calendar icon to daterangepicker component

feature/150167-datepicker

src/components/blipDaterangepicker/index.js

@@ -1,10 +1,13 @@
 import Component from 'nanocomponent'
 import html from 'nanohtml'
-// import raw from 'nanohtml/raw'
+import raw from 'nanohtml/raw'
+
 import { BlipDatepicker } from '../blipDatepicker'
 import { DateHelper } from './../shared'
 import { eventPathFindElementByTag } from './../../lib/utils'
 
+import Calendar from '../../img/calendar-outline.svg'
+
 const datepickerContainerClass = 'bp-daterange-datepicker'
 
 const inputContainerClass = 'bp-daterange-inputs'
@@ -21,6 +24,8 @@ export class BlipDaterangepicker extends Component {
 
     options = options || {}
 
+    this.hasTime = options.hasTime || false
+
     this.months = options.months
     this.weekdays = options.weekdays
 
@@ -43,6 +48,7 @@ export class BlipDaterangepicker extends Component {
     const daterangepicker = html`
     <div class="bp-daterange-picker">
       <div class="${inputContainerClass}">
+        <div class="bp-daterange-icon">${raw(Calendar)}</div>
         <input type="text" class="${startDateInputClass}" readonly>
         <span>~</span>
         <input type="text" class="${endDateInputClass}" readonly>
@@ -92,7 +98,7 @@ export class BlipDaterangepicker extends Component {
     let staticPicker
 
     return {
-      hasTime: true,
+      hasTime: this.hasTime,
       i18n: {
         months: this.months,
         weekdays: this.weekdays,

src/scss/components/_daterangepicker.scss

@@ -15,9 +15,24 @@
       @include bp-shadow(0, 0, 1px, 1px, $bp-color-bot);
     }
 
+    .bp-daterange-icon {
+      padding: 0;
+      vertical-align: middle;
+      @include fixed-size(2.5*$m);
+      padding: 0.2*$m;
+      background-color: $bp-color-sky;
+      border-radius: 5px;
+      display: inline-block;
+
+      svg path {
+        fill: $bp-color-bot;
+      }
+    }
+
     input {
       width: 14*$m;
       text-align: center;
+      vertical-align: middle;
 
       &::-ms-clear {
         display: none;