Merge pull request #83 from takenet/bugfix/daterangepicker

Bugfix/daterangepicker

sandbox/blipDaterangepicker.js

@@ -0,0 +1,11 @@
+import { BlipDaterangepicker } from '../src/components/blipDaterangepicker'
+
+const daterangepicker = new BlipDaterangepicker({
+  hasTime: true,
+  onSelection: ($period) => {
+    console.log('selected period', $period)
+  },
+})
+
+const daterangepickerParent = document.getElementById('daterangepicker')
+daterangepickerParent.appendChild(daterangepicker.render())

sandbox/index.html

@@ -27,7 +27,7 @@
   </div>
 
   <h1>Datepicker</h1>
-  <div id="datepicker"></div>
+  <div id="daterangepicker"></div>
 
   <h1>TOASTS</h1>
   <div id="toasts"></div>

sandbox/main.js

@@ -1,8 +1,9 @@
 import '../src/scss/main.scss'
+import './blipCarousel'
+import './blipDaterangepicker'
+import './blipLoading'
 import './blipSelect'
 import './blipTag'
 import './blipTags'
-import './blipLoading'
 import './blipTabs'
 // import './blipToasts'
-import './blipCarousel'

src/components/blipDatepicker/index.js

@@ -13,13 +13,8 @@ export class BlipDatepicker extends Component {
   static monthRows = 6
   static selectorRows = 4
   static selectorColumns = 3
-  static i18nEN = {
-    months: ['January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November', 'December'],
-    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
-      'Thursday', 'Friday', 'Saturday'],
-    timeInputText: 'Time',
-  }
+  static timeInputText = 'Time'
+
   static style = {
     datepicker: 'bp-datepicker',
     monthTable: 'month-table',
@@ -55,7 +50,11 @@ export class BlipDatepicker extends Component {
     this.name = options.name
     this.hasTime = options.hasTime || false
 
-    this.i18n = options.i18n || BlipDatepicker.i18nEN
+    this.i18n = options.i18n || {
+      months: DateHelper.months,
+      weekdays: DateHelper.weekdays,
+      timeInputText: BlipDatepicker.timeInputText,
+    }
 
     this._selectedPeriod = options.selectedPeriod
     this._validPeriod = options.validPeriod

src/components/blipDaterangepicker/index.js

@@ -26,8 +26,8 @@ export class BlipDaterangepicker extends Component {
 
     this.hasTime = options.hasTime || false
 
-    this.months = options.months
-    this.weekdays = options.weekdays
+    this.months = options.months || DateHelper.months
+    this.weekdays = options.weekdays || DateHelper.weekdays
 
     this.cancelText = options.cancelText || 'Cancel'
     this.applyText = options.applyText || 'Apply'
@@ -216,16 +216,18 @@ export class BlipDaterangepicker extends Component {
       this._setDateOnInput(endDate, this.endDateInput)
 
       if (this.onSelection) {
-        this.onSelection(period)
+        this.onSelection(this.selectedPeriod)
       }
     }
 
     this._pickerNotActive()
   }
 
   _cancelDate = () => {
-    this._leftPicker.selectedPeriod = this.selectedPeriod
-    this._rightPicker.selectedPeriod = this.selectedPeriod
+    if (this.selectedPeriod) {
+      this._leftPicker.selectedPeriod = this.selectedPeriod
+      this._rightPicker.selectedPeriod = this.selectedPeriod
+    }
 
     this._pickerNotActive()
   }

src/components/shared/DateHelper.js

@@ -1,4 +1,9 @@
 export class DateHelper {
+  static months = ['January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December']
+  static weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
+    'Thursday', 'Friday', 'Saturday']
+
   static thisMonth(sourceDate) {
     return new Date(
       sourceDate.getFullYear(),

src/scss/components/_daterangepicker.scss

@@ -43,7 +43,6 @@
 
   .bp-daterange-dropdown {
     position: absolute;
-    right: 0;
     margin-top: 0.2*$m;
     background-color: $bp-color-white;
     border-radius: 8px;