fix(components): fixed some bugs on blip-daterangepicker

Moved native months and weekdays strings to shared folder Fixed bug on select or cancel date on daterangepicker bugfix/daterangepicker
takenet · Nov 21, 2019 · d05c9bb · d05c9bb
1 parent ec3d6f2
commit d05c9bb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/components/blipDatepicker/index.js b/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

diff --git a/src/components/blipDaterangepicker/index.js b/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()
   }

diff --git a/src/components/shared/DateHelper.js b/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(),

diff --git a/src/scss/components/_daterangepicker.scss b/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;