fix

datepicker/calendar-panel.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="calendar">
-    <div class="calendar-header">
-      <a v-if="currentPanel === 'time'" @click="currentPanel = 'date'">{{now.toLocaleDateString()}}</a>
-      <template v-else>
-        <a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
-        <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
-        <a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
-        <a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)">&rsaquo;</a>
-        <a @click="showMonths">{{months[currentMonth]}}</a>
-        <a @click="showYears">{{currentYear}}</a>
-      </template>
+    <div class="calendar-header" v-if="currentPanel === 'time'">
+      <a @click="currentPanel = 'date'">{{now.toLocaleDateString()}}</a>
+    </div>
+    <div class="calendar-header" v-else>
+      <a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
+      <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
+      <a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
+      <a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)">&rsaquo;</a>
+      <a @click="showMonths">{{months[currentMonth]}}</a>
+      <a @click="showYears">{{currentYear}}</a>
     </div>
     <div class="calendar-content">
       <table class="calendar-table" v-show="currentPanel === 'date'">

datepicker/index.vue

@@ -19,13 +19,13 @@
          :style="position"
          ref="calendar"
          v-show="showPopup">
-      <template v-if="!range">
-        <calendar-panel 
-          v-model="currentValue"
-          @select="selectDate"
-          :show="showPopup"></calendar-panel>
-      </template>
-      <template v-else>
+
+      <calendar-panel 
+        v-if="!range"
+        v-model="currentValue"
+        @select="selectDate"
+        :show="showPopup"></calendar-panel>
+      <div v-else style="overflow:hidden" >
         <div class="datepicker-top" v-if="ranges.length">
           <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
         </div>
@@ -39,7 +39,7 @@
                         :start-at="currentValue[0]"
                         @select="selectDate"
                         :show="showPopup"></calendar-panel>
-      </template>
+      </div>
       <div class="datepicker-footer" v-if="confirm">
         <button type="button" class="datepicker-btn datepicker-btn-confirm" @click="confirmDate"> {{ confirmText }}</button>
       </div>

package.json

@@ -2,7 +2,7 @@
   "name": "vue2-datepicker",
   "description": "A Datepicker Component For Vue2",
   "main": "datepicker/index.vue",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"