fix(components): added invalid-day to datepicker

feature/150167-datepicker
takenet · Nov 6, 2019 · 0417990 · 0417990
1 parent db283fa
commit 0417990
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/sandbox/main.js b/sandbox/main.js
@@ -167,7 +167,10 @@ setTimeout(() => {
 const carousel = new BlipCarousel('carousel', 300)
 carousel.render()
 
-const picker = new BlipDatepicker({hasTime: true})
+const today = new Date()
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
+const lastYear = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate())
+const picker = new BlipDatepicker({hasTime: true, validPeriod: {startDate: lastYear, endDate: tomorrow}})
 const pickerParent = document.getElementById('datepicker')
 
 pickerParent.appendChild(picker.render(new Date()))
diff --git a/src/components/blipDatepicker/index.js b/src/components/blipDatepicker/index.js
@@ -79,6 +79,7 @@ export class BlipDatepicker extends Component {
     monthDay: 'month-day',
     lastMonth: 'last-month',
     nextMonth: 'next-month',
+    invalidDay: 'invalid-day',
     currentMonth: 'current-month',
     rangeLimit: 'range-limit',
     inRange: 'in-range',
@@ -98,6 +99,8 @@ export class BlipDatepicker extends Component {
 
     this._selectedDay = options.selectedDay || undefined
     this._selectedPeriod = options.selectedPeriod || undefined
+    this._validPeriod = options.validPeriod || undefined
+
     this._onMonthButtonClick = options.onMonthButtonClick || this._onMonthButtonClick
     this.onDateSelectorShow = options.onDateSelectorShow || undefined
     this.onDateSelectorHide = options.onDateSelectorHide || undefined
@@ -325,7 +328,7 @@ export class BlipDatepicker extends Component {
   }
 
   _isValidDay(day) {
-    return day.classList.contains(BlipDatepicker.style.currentMonth)
+    return day.classList.contains(BlipDatepicker.style.currentMonth) && !day.classList.contains(BlipDatepicker.style.invalidDay)
   }
 
   _renderMonth() {
@@ -364,6 +367,9 @@ export class BlipDatepicker extends Component {
                 day.classList.add(BlipDatepicker.style.nextMonth)
                 break
             }
+            if (this._validPeriod && !DateHelper.isBetween(this._validPeriod.startDate, this._validPeriod.endDate, dayDate)) {
+              day.classList.add(BlipDatepicker.style.invalidDay)
+            }
           }
         )
         firstDayOfWeek = DateHelper.moveDay(firstDayOfWeek, BlipDatepicker.weekSize)

diff --git a/src/scss/components/_datepicker.scss b/src/scss/components/_datepicker.scss
@@ -92,15 +92,15 @@
     .month-day {
       color: $bp-color-desk;
 
-      &.last-month, &.next-month {
+      &.last-month, &.next-month, &.invalid-day {
         color: $bp-color-time;
       }
 
       &.in-range {
         background-color: $bp-color-sky;
       }
 
-      &.range-limit div, &.current-month:hover div {
+      &.range-limit div, &.current-month:not(.invalid-day):hover div {
         color: $bp-color-white;
         background-color: $bp-color-bot;
       }