Merge pull request charliekassel#289 from g-wilson/master

Classes on Day elements for highlight-start and highlight-end

Author: charliekassel

src/components/Datepicker.vue

@@ -263,6 +263,8 @@ export default {
           isSelected: this.isSelectedDate(dObj),
           isDisabled: this.isDisabledDate(dObj),
           isHighlighted: this.isHighlightedDate(dObj),
+          isHighlightStart: this.isHighlightStart(dObj),
+          isHighlightEnd: this.isHighlightEnd(dObj),
           isToday: dObj.toDateString() === (new Date()).toDateString(),
           isWeekend: dObj.getDay() === 0 || dObj.getDay() === 6,
           isSaturday: dObj.getDay() === 6,
@@ -620,6 +622,34 @@ export default {
       return highlighted
     },
 
+    /**
+     * Whether a day is highlighted and it is the first date
+     * in the highlighted range of dates
+     * @param {Date}
+     * @return {Boolean}
+     */
+    isHighlightStart (date) {
+      return this.isHighlightedDate(date) &&
+        (this.highlighted.from instanceof Date) &&
+        (this.highlighted.from.getFullYear() === date.getFullYear()) &&
+        (this.highlighted.from.getMonth() === date.getMonth()) &&
+        (this.highlighted.from.getDate() === date.getDate())
+    },
+
+    /**
+     * Whether a day is highlighted and it is the first date
+     * in the highlighted range of dates
+     * @param {Date}
+     * @return {Boolean}
+     */
+    isHighlightEnd (date) {
+      return this.isHighlightedDate(date) &&
+        (this.highlighted.to instanceof Date) &&
+        (this.highlighted.to.getFullYear() === date.getFullYear()) &&
+        (this.highlighted.to.getMonth() === date.getMonth()) &&
+        (this.highlighted.to.getDate() === date.getDate())
+    },
+
     /**
      * Helper
      * @param  {mixed}  prop
@@ -754,7 +784,9 @@ export default {
         'today': day.isToday,
         'weekend': day.isWeekend,
         'sat': day.isSaturday,
-        'sun': day.isSunday
+        'sun': day.isSunday,
+        'highlight-start': day.isHighlightStart,
+        'highlight-end': day.isHighlightEnd
       }
     },
 

test/unit/specs/Datepicker.spec.js

@@ -476,6 +476,18 @@ describe('Datepicker highlight date', () => {
     expect(vm.isHighlightedDate(new Date(2016, 9, 2))).to.equal(true)
     expect(vm.isHighlightedDate(new Date(2016, 9, 3))).to.equal(false)
   })
+
+  it('should detect the first date of the highlighted dates', () => {
+    expect(vm.isHighlightStart(new Date(2016, 12, 4))).to.equal(true)
+    expect(vm.isHighlightStart(new Date(2016, 12, 3))).to.equal(false)
+    expect(vm.isHighlightStart(new Date(2016, 12, 5))).to.equal(false)
+  })
+
+  it('should detect the last date of the highlighted dates', () => {
+    expect(vm.isHighlightEnd(new Date(2016, 12, 8))).to.equal(true)
+    expect(vm.isHighlightEnd(new Date(2016, 12, 6))).to.equal(false)
+    expect(vm.isHighlightEnd(new Date(2016, 12, 7))).to.equal(false)
+  })
 })
 
 describe('Datepicker with monday as first day of week', () => {