Merge pull request charliekassel#322 from cybrilla/master

Adds options to disable and highlight dates using fuctions

README.md

@@ -162,7 +162,17 @@ var state = {
         }, {
             from: new Date(2017, 1, 12),
             to: new Date(2017, 2, 25)
-        }]
+        }],
+        // a custom function that returns true if the date is disabled
+        // this can be used for wiring you own logic to disable a date if none
+        // of the above conditions serve your purpose
+        // this function should accept a date and return true if is disabled
+        customPredictor: function(date) {
+          // disables the date if it is a multiple of 5
+          if(date.getDate() % 5 == 0){
+            return true
+          }
+        }
     }
 }
 </script>
@@ -185,7 +195,17 @@ var state = {
             new Date(2016, 9, 16),
             new Date(2016, 9, 17),
             new Date(2016, 9, 18)
-        ]
+        ],
+        // a custom function that returns true of the date is highlighted
+        // this can be used for wiring you own logic to highlight a date if none
+        // of the above conditions serve your purpose
+        // this function should accept a date and return true if is highlighted
+        customPredictor: function(date) {
+          // highlights the date if it is a multiple of 4
+          if(date.getDate() % 4 == 0){
+            return true
+          }
+        }
     }
 }
 </script>

src/Demo.vue

@@ -70,11 +70,55 @@
     </div>
 
     <div class="example">
-      <h3>Highlighting Dates</h3>
+      <div class="settings">
+        <h5>Settings</h5>
+        <div class="form-group">
+          <label>Disabled Function:</label>
+        </div>
+        <pre>
+          disabled: {
+            customPredictor: function (date) {
+              // disables every day of a month which is a multiple of 3
+              if (date.getDate() % 3 === 0) {
+                return true
+              }
+            }
+          }
+        </pre>
+        <h5>Resulting Date picker</h5>
+        <datepicker :disabled="disabledFn"></datepicker>
+      </div>
+    </div>
+
+    <div class="example">
+      <h3>Highlighting Dates Matching Given Function</h3>
       <datepicker :disabled="disabled"></datepicker>
       <code>
         &lt;datepicker :highlighted="highlighted"&gt;&lt;/datepicker&gt;
       </code>
+      <div class="settings">
+        <h5>Settings</h5>
+        <pre>
+          highlighted: {
+            customPredictor: function (date) {
+              // highlights every day of a month which is a multiple of 4
+              if (date.getDate() % 4 === 0) {
+                return true
+              }
+            }
+          }
+        </pre>
+
+        <h5>Resulting Date picker</h5>
+        <datepicker :highlighted="highlightedFn"></datepicker>
+      </div>
+    </div>
+
+    <div class="example">
+      <h3>Highlighting Dates</h3>
+      <code>
+        &lt;datepicker :highlighted="highlighted"&gt;&lt;/datepicker&gt;
+      </code>
       <div class="settings">
         <h5>Settings</h5>
         <div class="form-group">
@@ -163,6 +207,20 @@ export default {
     return {
       format: 'd MMMM yyyy',
       disabled: {},
+      disabledFn: {
+        customPredictor (date) {
+          if (date.getDate() % 3 === 0) {
+            return true
+          }
+        }
+      },
+      highlightedFn: {
+        customPredictor (date) {
+          if (date.getDate() % 4 === 0) {
+            return true
+          }
+        }
+      },
       highlighted: {},
       eventMsg: null,
       state: state,

src/components/Datepicker.vue

@@ -566,6 +566,9 @@ export default {
       if (typeof this.disabled.daysOfMonth !== 'undefined' && this.disabled.daysOfMonth.indexOf(date.getDate()) !== -1) {
         disabled = true
       }
+      if (typeof this.disabled.customPredictor === 'function' && this.disabled.customPredictor(date)) {
+        disabled = true
+      }
       return disabled
     },
     /**
@@ -605,6 +608,10 @@ export default {
         highlighted = true
       }
 
+      if (typeof this.highlighted.customPredictor === 'function' && this.highlighted.customPredictor(date)) {
+        highlighted = true
+      }
+
       return highlighted
     },
     /**

test/unit/specs/Datepicker.spec.js

@@ -445,6 +445,22 @@ describe('Datepicker has disabled dates but can change dates', () => {
     expect(vm.isDisabledDate(new Date(2016, 10, 30))).to.equal(true)
     expect(vm.isDisabledDate(new Date(2016, 9, 11))).to.equal(false)
   })
+
+  it('can accept a customPredictor to check if the date is disabled', () => {
+    vm = getViewModel(Datepicker, {
+      disabled: {
+        customPredictor (date) {
+          if (date.getDate() % 4 === 0) {
+            return true
+          }
+        }
+      }
+    })
+    expect(vm.isDisabledDate(new Date(2016, 8, 29))).to.equal(false)
+    expect(vm.isDisabledDate(new Date(2016, 9, 28))).to.equal(true)
+    expect(vm.isDisabledDate(new Date(2016, 10, 24))).to.equal(true)
+    expect(vm.isDisabledDate(new Date(2016, 9, 11))).to.equal(false)
+  })
 })
 
 describe('Datepicker highlight date', () => {
@@ -524,6 +540,22 @@ describe('Datepicker highlight date', () => {
     expect(vm.isHighlightedDate(new Date(2016, 7, 20))).to.equal(false)
   })
 
+  it('can accept a customPredictor to check if the date is highlighted', () => {
+    vm = getViewModel(Datepicker, {
+      highlighted: {
+        customPredictor (date) {
+          if (date.getDate() % 5 === 0) {
+            return true
+          }
+        }
+      }
+    })
+    expect(vm.isHighlightedDate(new Date(2016, 8, 30))).to.equal(true)
+    expect(vm.isHighlightedDate(new Date(2016, 9, 28))).to.equal(false)
+    expect(vm.isHighlightedDate(new Date(2016, 10, 20))).to.equal(true)
+    expect(vm.isHighlightedDate(new Date(2016, 9, 11))).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)