From 3ab904bf829762d93becfc599a1cfe502c232dcb Mon Sep 17 00:00:00 2001
From: anthdm <anthony@academiclabs.co>
Date: Thu, 9 Nov 2017 07:04:00 +0100
Subject: [PATCH 1/5] Cleanup indentations.

---
 src/components/Datepicker.vue | 169 ++++++++++++++--------------------
 1 file changed, 71 insertions(+), 98 deletions(-)

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 02a5caa6..92390189 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -1,103 +1,76 @@
 <template>
   <div class="vdp-datepicker" :class="[wrapperClass, isRtl ? 'rtl' : '']">
-    <div :class="{'input-group' : bootstrapStyling}">
-      <!-- Calendar Button -->
-      <span class="vdp-datepicker__calendar-button" :class="{'input-group-addon' : bootstrapStyling}" v-if="calendarButton" @click="showCalendar" v-bind:style="{'cursor:not-allowed;' : disabledPicker}">
-        <i :class="calendarButtonIcon">
-          <span v-if="!calendarButtonIcon">&hellip;</span>
-        </i>
-      </span>
-      <!-- Input -->
-      <input
-        :type="inline ? 'hidden' : 'text'"
-        :class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
-        :name="name"
-        :id="id"
-        @click="showCalendar"
-        :value="formattedValue"
-        :placeholder="placeholder"
-        :clear-button="clearButton"
-        :disabled="disabledPicker"
-        :required="required"
-        readonly>
-      <!-- Clear Button -->
-      <span class="vdp-datepicker__clear-button" :class="{'input-group-addon' : bootstrapStyling}" v-if="clearButton && selectedDate" @click="clearDate()">
-        <i :class="clearButtonIcon">
-          <span v-if="!clearButtonIcon">&times;</span>
-        </i>
-      </span>
-    </div>
-
-        <!-- Day View -->
-        <template v-if="allowedToShowView('day')">
-          <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
-              <header>
-                  <span
-                      @click="isRtl ? nextMonth() : previousMonth()"
-                      class="prev"
-                      v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
-                  <span @click="showMonthCalendar" :class="allowedToShowView('month') ? 'up' : ''">{{ currMonthName }} {{ currYear }}
-                  </span>
-                  <span
-                      @click="isRtl ? previousMonth() : nextMonth()"
-                      class="next"
-                      v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
-              </header>
-              <div :class="isRtl ? 'flex-rtl' : ''">
-                <span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
-                <span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span><!--
-                --><span class="cell day"
-                    v-for="day in days"
-                    :key="day.timestamp"
-                    track-by="timestamp"
-                    v-bind:class="dayClasses(day)"
-                    @click="selectDate(day)">{{ day.date }}</span>
-              </div>
-          </div>
-        </template>
-
-        <!-- Month View -->
-        <template v-if="allowedToShowView('month')">
-          <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
-              <header>
-                  <span
-                      @click="previousYear"
-                      class="prev"
-                      v-bind:class="{ 'disabled' : previousYearDisabled(pageTimestamp) }">&lt;</span>
-                  <span @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ getPageYear() }}</span>
-                  <span
-                      @click="nextYear"
-                      class="next"
-                      v-bind:class="{ 'disabled' : nextYearDisabled(pageTimestamp) }">&gt;</span>
-              </header>
-              <span class="cell month"
-                  v-for="month in months"
-                  :key="month.timestamp"
-                  track-by="timestamp"
-                  v-bind:class="{ 'selected': month.isSelected, 'disabled': month.isDisabled }"
-                  @click.stop="selectMonth(month)">{{ month.month }}</span>
-          </div>
-        </template>
-
-        <!-- Year View -->
-        <template v-if="allowedToShowView('year')">
-          <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
-              <header>
-                  <span @click="previousDecade" class="prev"
-                      v-bind:class="{ 'disabled' : previousDecadeDisabled(pageTimestamp) }">&lt;</span>
-                  <span>{{ getPageDecade() }}</span>
-                  <span @click="nextDecade" class="next"
-                      v-bind:class="{ 'disabled' : nextMonthDisabled(pageTimestamp) }">&gt;</span>
-              </header>
-              <span
-                  class="cell year"
-                  v-for="year in years"
-                  :key="year.timestamp"
-                  track-by="timestamp"
-                  v-bind:class="{ 'selected': year.isSelected, 'disabled': year.isDisabled }"
-                  @click.stop="selectYear(year)">{{ year.year }}</span>
-          </div>
-        </template>
+    <!-- Day View -->
+    <template v-if="allowedToShowView('day')">
+      <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
+        <header>
+          <span 
+            @click="isRtl ? nextMonth() : previousMonth()"
+            class="prev"
+            v-bind:class="{ 'disabled' : isRtl ? nextMonthDisabled(pageTimestamp) : previousMonthDisabled(pageTimestamp) }">&lt;</span>
+          <span @click="showMonthCalendar" :class="allowedToShowView('month') ? 'up' : ''">{{ currMonthName }} {{ currYear }}
+          </span>
+          <span
+            @click="isRtl ? previousMonth() : nextMonth()"
+            class="next"
+            v-bind:class="{ 'disabled' : isRtl ? previousMonthDisabled(pageTimestamp) : nextMonthDisabled(pageTimestamp) }">&gt;</span>
+        </header>
+        <div :class="isRtl ? 'flex-rtl' : ''">
+          <span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
+          <span class="cell day blank" v-for="d in blankDays" :key="d.timestamp"></span>
+          <span class="cell day"
+            v-for="day in days"
+            :key="day.timestamp"
+            track-by="timestamp"
+            v-bind:class="dayClasses(day)"
+            @click="selectDate(day)">{{ day.date }}
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Month View -->
+    <template v-if="allowedToShowView('month')">
+      <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
+        <header>
+          <span
+            @click="previousYear"
+            class="prev"
+            v-bind:class="{ 'disabled' : previousYearDisabled(pageTimestamp) }">&lt;</span>
+          <span @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ getPageYear() }}</span>
+          <span
+            @click="nextYear"
+            class="next"
+            v-bind:class="{ 'disabled' : nextYearDisabled(pageTimestamp) }">&gt;</span>
+        </header>
+        <span class="cell month"
+          v-for="month in months"
+          :key="month.timestamp"
+          track-by="timestamp"
+          v-bind:class="{ 'selected': month.isSelected, 'disabled': month.isDisabled }"
+          @click.stop="selectMonth(month)">{{ month.month }}</span>
+      </div>
+    </template>
+
+    <!-- Year View -->
+    <template v-if="allowedToShowView('year')">
+      <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
+        <header>
+          <span @click="previousDecade" class="prev"
+            v-bind:class="{ 'disabled' : previousDecadeDisabled(pageTimestamp) }">&lt;</span>
+          <span>{{ getPageDecade() }}</span>
+          <span @click="nextDecade" class="next"
+            v-bind:class="{ 'disabled' : nextMonthDisabled(pageTimestamp) }">&gt;</span>
+        </header>
+        <span
+          class="cell year"
+          v-for="year in years"
+          :key="year.timestamp"
+          track-by="timestamp"
+          v-bind:class="{ 'selected': year.isSelected, 'disabled': year.isDisabled }"
+          @click.stop="selectYear(year)">{{ year.year }}</span>
+      </div>
+    </template>
   </div>
 </template>
 

From af7dc7934437175e4bba42ba993fe7a32921a87c Mon Sep 17 00:00:00 2001
From: anthdm <anthony@academiclabs.co>
Date: Thu, 9 Nov 2017 07:10:52 +0100
Subject: [PATCH 2/5] Added slot and eventListener for an element that will
 trigger the datepicker.

---
 src/Demo.vue                  | 204 +---------------------------------
 src/components/Datepicker.vue |   5 +
 2 files changed, 8 insertions(+), 201 deletions(-)

diff --git a/src/Demo.vue b/src/Demo.vue
index 1c3e9ac5..e89b0ae6 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -5,212 +5,14 @@
 
     <div class="example">
       <h3>Default datepicker</h3>
-      <datepicker placeholder="Select Date"></datepicker>
+      <datepicker>
+        <button>click me</button>
+      </datepicker>
       <code>
           &lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
       </code>
     </div>
 
-    <div class="example">
-        <h3>v-model datepicker</h3>
-        <datepicker placeholder="Select Date" v-model="vModelExample"></datepicker>
-        <code>
-            &lt;datepicker placeholder="Select Date" v-model="vmodelexample"&gt;&lt;/datepicker&gt;
-        </code>
-        <hr/>
-      <p>{{ vModelExample }}</p>
-    </div>
-
-    <div class="example">
-      <h3>Format datepicker</h3>
-      <datepicker :format="format"></datepicker>
-      <code>
-        &lt;datepicker :format="format"&gt;&lt;/datepicker&gt;
-      </code>
-      <div class="settings">
-        <h5>Settings</h5>
-        <div class="form-group">
-          <label>Format</label>
-          <select v-model="format">
-            <option value="d MMM yyyy" selected>d MMM yyyy - e.g 12 Feb 2016</option>
-            <option value="d MMMM yyyy">d MMMM yyyy - e.g 12 February 2016</option>
-            <option value="yyyy-MM-dd">yyyy-MM-dd - e.g 2016-02-12</option>
-            <option value="dsu MMM yyyy">dsu MMM yyyy - e.g 12th Feb 2016</option>
-            <option value="D dsu MMM yyyy">D dsu MMM yyyy - e.g Sat 12th Feb 2016</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <div class="example">
-      <h3>With minimum and maximum date range</h3>
-      <datepicker :disabled="disabled"></datepicker>
-      <code>
-        &lt;datepicker :disabled="disabled"&gt;&lt;/datepicker&gt;
-      </code>
-      <div class="settings">
-        <h5>Settings</h5>
-        <div class="form-group">
-          <label>Disabled to:</label>
-          <datepicker v-on:selected="disableTo"></datepicker>
-        </div>
-        <div class="form-group">
-          <label>Disabled from:</label>
-          <datepicker v-on:selected="disableFrom"></datepicker>
-        </div>
-        <div class="form-group">
-          <label>Disabled Days of Month:</label>
-          <input type="text" value="" v-on:change="setDisabledDays">
-        </div>
-        <pre>disabled: {{ disabled }}</pre>
-
-        <h5>Resulting Date picker</h5>
-        <datepicker :disabled="disabled"></datepicker>
-      </div>
-    </div>
-
-    <div class="example">
-      <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">
-          <label>Highlight from:</label>
-          <datepicker v-on:selected="highlightFrom"></datepicker>
-        </div>
-        <div class="form-group">
-          <label>Highlight to:</label>
-          <datepicker v-on:selected="highlightTo"></datepicker>
-        </div>
-        <div class="form-group">
-          <label>Highlight Days of Month:</label>
-          <input type="text" value="" v-on:change="setHighlightedDays">
-        </div>
-        <pre>highlighted: {{ highlighted }}</pre>
-
-        <h5>Resulting Date picker</h5>
-        <datepicker :highlighted="highlighted"></datepicker>
-      </div>
-    </div>
-
-    <div class="example">
-      <h3>Translations</h3>
-      <h5>{{ languages[language].language }} datepicker</h5>
-
-      <datepicker :language="language" format="d MMMM yyyy"></datepicker>
-      <code>
-          &lt;datepicker language="{{ language }}"&gt;&lt;/datepicker&gt;
-      </code>
-      <div class="settings">
-        <h5>Settings</h5>
-        <select v-model="language">
-          <option :value="key" v-for="(language, key) in languages" :key="key">{{ language.language }}</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="example">
-      <h3>Inline datepicker</h3>
-      <datepicker :inline="true"></datepicker>
-      <code>
-          &lt;datepicker :inline="true"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-    <div class="example">
-      <h3>RTL datepicker</h3>
-      <datepicker language="he"></datepicker>
-      <code>
-          &lt;datepicker  language="he"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
-    <div class="example">
-      <h3>Day view only</h3>
-      <datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
-      <code>
-        &lt;datepicker :minimumView="'day'" :maximumView="'day'"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
-    <div class="example">
-      <h3>Day view only RTL</h3>
-      <datepicker :minimumView="'day'" :maximumView="'day'" language="he"></datepicker>
-      <code>
-        &lt;datepicker :minimumView="'day'" :maximumView="'day'" language="he"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
-    <div class="example">
-      <h3>Month view only</h3>
-      <datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
-      <code>
-        &lt;datepicker :minimumView="'month'" :maximumView="'month'"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
-    <div class="example">
-      <h3>Day and month view only</h3>
-      <datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"></datepicker>
-      <code>
-        &lt;datepicker :minimumView="'day'" :maximumView="'month'" :initialView="'month'"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
-    <div class="example">
-      <h3>Year and month view only</h3>
-      <datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"></datepicker>
-      <code>
-        &lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
-      </code>
-    </div>
-
   </div>
 </template>
 
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 92390189..95576d9a 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="vdp-datepicker" :class="[wrapperClass, isRtl ? 'rtl' : '']">
+    <!-- slot for any kind of element that triggers the datepicker -->
+    <slot></slot>
     <!-- Day View -->
     <template v-if="allowedToShowView('day')">
       <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
@@ -798,6 +800,9 @@ export default {
       if (this.isInline) {
         this.setInitialView()
       }
+      this.$el.childNodes[0].addEventListener('click', e => {
+        this.showCalendar()
+      })
     }
   },
   mounted () {

From 8b868d4ca79c7fe4e48f4b7b650ab19f79d3d6d4 Mon Sep 17 00:00:00 2001
From: anthdm <anthony@academiclabs.co>
Date: Thu, 9 Nov 2017 09:26:40 +0100
Subject: [PATCH 3/5] Implemented the basics of multiselect

---
 src/Demo.vue                  |  2 +-
 src/components/Datepicker.vue | 47 ++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/Demo.vue b/src/Demo.vue
index e89b0ae6..a05e09b3 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -5,7 +5,7 @@
 
     <div class="example">
       <h3>Default datepicker</h3>
-      <datepicker>
+      <datepicker :multiSelect="true">
         <button>click me</button>
       </datepicker>
       <code>
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 95576d9a..be1f63da 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -97,20 +97,18 @@ export default {
       type: String,
       default: 'en'
     },
+    multiSelect: Boolean,
     fullMonthName: Boolean,
     disabled: Object,
     highlighted: Object,
-    placeholder: String,
     inline: Boolean,
     calendarClass: [String, Object],
-    inputClass: [String, Object],
     wrapperClass: [String, Object],
     mondayFirst: Boolean,
     clearButton: Boolean,
     clearButtonIcon: String,
     calendarButton: Boolean,
     calendarButtonIcon: String,
-    bootstrapStyling: Boolean,
     initialView: String,
     disabledPicker: Boolean,
     required: Boolean,
@@ -136,6 +134,12 @@ export default {
        * {Date}
        */
       selectedDate: null,
+      /*
+       * Selected Date End
+       * The end date in a multiselect daterange.
+       * {Date}
+       */
+      selectedDateEnd: null,
       /*
        * Flags to show calendar views
        * {Boolean}
@@ -146,7 +150,11 @@ export default {
       /*
        * Positioning
        */
-      calendarHeight: 0
+      calendarHeight: 0,
+      /*
+      * Determines if a multiselect range was already picked, to allow a repick.
+      */
+      alreadyPicked: false
     }
   },
   watch: {
@@ -374,8 +382,17 @@ export default {
       this.$emit('selected', new Date(date))
       this.$emit('input', new Date(date))
     },
+    setDateNew (key, timestamp) {
+      const date = new Date(timestamp)
+      this[key] = new Date(date)
+      this.setPageDate(date)
+      if (this.multiSelect && this.selectedDateEnd) {
+        this.$emit('selected', {start: this.selectedDate, end: this.selectedDateEnd})
+      }
+    },
     clearDate () {
       this.selectedDate = null
+      this.selectedDateEnd = null
       this.$emit('selected', null)
       this.$emit('input', null)
       this.$emit('cleared')
@@ -388,12 +405,22 @@ export default {
         this.$emit('selectedDisabled', day)
         return false
       }
-      this.setDate(day.timestamp)
       if (this.isInline) {
-        this.showDayCalendar()
-      } else {
-        this.close()
+        this.setDate(day.timestamp)
+        return this.showDayCalendar()
+      }
+      if (this.multiSelect && (!this.selectedDate || this.alreadyPicked)) {
+        this.alreadyPicked = false
+        if (this.selectedDateEnd) this.selectedDateEnd = null
+        return this.setDateNew('selectedDate', day.timestamp)
       }
+      if (this.multiSelect && this.selectedDate) {
+        this.setDateNew('selectedDateEnd', day.timestamp)
+        this.alreadyPicked = true
+        return this.close()
+      }
+      this.setDate(day.timestamp)
+      this.close()
     },
     /**
      * @param {Object} month
@@ -544,7 +571,9 @@ export default {
      * @return {Boolean}
      */
     isSelectedDate (dObj) {
-      return this.selectedDate && this.selectedDate.toDateString() === dObj.toDateString()
+      return this.selectedDate && this.selectedDate.toDateString() === dObj.toDateString() ||
+        this.selectedDateEnd && this.selectedDateEnd.toDateString() === dObj.toDateString() ||
+        (dObj > this.selectedDate && dObj < this.selectedDateEnd)
     },
     /**
      * Whether a day is disabled

From 8bd09cdfee20d9fb02db800c0f0d17a7fbf91b5a Mon Sep 17 00:00:00 2001
From: anthdm <anthony@academiclabs.co>
Date: Thu, 9 Nov 2017 09:30:21 +0100
Subject: [PATCH 4/5] Changed README

---
 README.md | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 363fc67b..6497334f 100644
--- a/README.md
+++ b/README.md
@@ -2,15 +2,7 @@
 
 ![](https://travis-ci.org/charliekassel/vuejs-datepicker.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/charliekassel/vuejs-datepicker/badge.svg?branch=master)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)
 
-A datepicker Vue component. Compatible with Vue 2.x
-
-NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with 1.x you can install with `npm install vuejs-datepicker@0.9.9`
-
-## Demo
-
-Demo is broken :(
-To view examples clone the repo and run `npm install && npm run dev`
-https://www.webpackbin.com/bins/-KhQbtTSVuU6r8VCrIdC - not currently working.
+|> This repo is forked from charliekasses/vuejs-datepicker and is currently ongoing drastic API changes. Therefore this repo is considered *unstable*.
 
 ## Install
 

From b9dbf0aa9cefa2802ace1d629ef40da17376e74e Mon Sep 17 00:00:00 2001
From: anthdm <anthony@academiclabs.co>
Date: Thu, 9 Nov 2017 09:33:06 +0100
Subject: [PATCH 5/5] Changed the README with unstable warning.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6497334f..63947a2b 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ![](https://travis-ci.org/charliekassel/vuejs-datepicker.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/charliekassel/vuejs-datepicker/badge.svg?branch=master)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)
 
-|> This repo is forked from charliekasses/vuejs-datepicker and is currently ongoing drastic API changes. Therefore this repo is considered *unstable*.
+> This repo is forked from charliekasses/vuejs-datepicker and is currently ongoing drastic API changes. Therefore this repo is considered *unstable*.
 
 ## Install