Provided slots for calendar rotation buttons content. Default look an…

…d feel stays the same.
charliekassel · Jun 21, 2019 · 7f08996 · 7f08996
1 parent 7056546
commit 7f08996
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -289,6 +289,21 @@ To implement some custom styling (for instance to add an animated placeholder) o
 </datepicker>
 ```
 
+#### prevIntervalBtn and nextIntervalBtn
+
+To provide custom content for buttons that rotate intervals in calendar header `prevIntervalBtn` and `nextIntervalBtn` slots may be used:
+
+``` html
+<datepicker placeholder="Select Date" >
+  <svg slot="prevIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)">
+    <path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  <svg slot="nextIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</datepicker>
+```
+
 
 ## Translations
 

diff --git a/example/Demo.vue b/example/Demo.vue
@@ -246,6 +246,35 @@
       </code>
     </div>
 
+    <div class="example">
+      <h3>Slot for calendar buttons content</h3>
+      <datepicker placeholder="Select Date" >
+        <svg slot="prevIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)">
+          <path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <svg slot="nextIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </datepicker>
+      <code>
+        &lt;datepicker placeholder="Select Date" &gt;
+        <br/>
+        &nbsp;&lt;svg slot="prevIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)"&gt;
+        <br/>
+        &nbsp;&nbsp;&lt;path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/&gt;
+        <br/>
+        &nbsp;&lt;/svg&gt;
+        <br/>
+        &nbsp;&lt;svg slot="nextIntervalBtn" width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
+        <br/>
+        &nbsp;&nbsp;&lt;path d="M14 27L24 18.036L14 9" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/&gt;
+        <br/>
+        &nbsp;&lt;/svg&gt;
+        <br/>
+        &lt;/datepicker&gt;
+      </code>
+    </div>
+
   </div>
 </template>
 

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
@@ -53,6 +53,8 @@
       @showMonthCalendar="showMonthCalendar"
       @selectedDisabled="selectDisabledDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      <slot name="nextIntervalBtn" slot="nextIntervalBtn"></slot>
+      <slot name="prevIntervalBtn" slot="prevIntervalBtn"></slot>
     </picker-day>
 
     <!-- Month View -->
@@ -72,6 +74,8 @@
       @showYearCalendar="showYearCalendar"
       @changedYear="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      <slot name="nextIntervalBtn" slot="nextIntervalBtn"></slot>
+      <slot name="prevIntervalBtn" slot="prevIntervalBtn"></slot>
     </picker-month>
 
     <!-- Year View -->
@@ -90,6 +94,8 @@
       @selectYear="selectYear"
       @changedDecade="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
+      <slot name="nextIntervalBtn" slot="nextIntervalBtn"></slot>
+      <slot name="prevIntervalBtn" slot="prevIntervalBtn"></slot>
     </picker-year>
   </div>
 </template>

diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
@@ -5,12 +5,20 @@
       <span
         @click="isRtl ? nextMonth() : previousMonth()"
         class="prev"
-        :class="{'disabled': isLeftNavDisabled}">&lt;</span>
+        :class="{'disabled': isLeftNavDisabled}">
+          <slot name="prevIntervalBtn">
+            <span class="default">&lt;</span>
+          </slot>
+      </span>
       <span class="day__month_btn" @click="showMonthCalendar" :class="allowedToShowView('month') ? 'up' : ''">{{ isYmd ? currYearName : currMonthName }} {{ isYmd ? currMonthName : currYearName }}</span>
       <span
         @click="isRtl ? previousMonth() : nextMonth()"
         class="next"
-        :class="{'disabled': isRightNavDisabled}">&gt;</span>
+        :class="{'disabled': isRightNavDisabled}">
+          <slot name="nextIntervalBtn">
+            <span class="default">&gt;</span>
+          </slot>
+      </span>
     </header>
     <div :class="isRtl ? 'flex-rtl' : ''">
       <span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>

diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
@@ -5,12 +5,20 @@
       <span
         @click="isRtl ? nextYear() : previousYear()"
         class="prev"
-        :class="{'disabled': isLeftNavDisabled}">&lt;</span>
+        :class="{'disabled': isLeftNavDisabled}">
+          <slot name="prevIntervalBtn">
+            <span class="default">&lt;</span>
+          </slot>
+      </span>
       <span class="month__year_btn" @click="showYearCalendar" :class="allowedToShowView('year') ? 'up' : ''">{{ pageYearName }}</span>
       <span
         @click="isRtl ? previousYear() : nextYear()"
         class="next"
-        :class="{'disabled': isRightNavDisabled}">&gt;</span>
+        :class="{'disabled': isRightNavDisabled}">
+          <slot name="nextIntervalBtn">
+            <span class="default">&gt;</span>
+          </slot>
+      </span>
     </header>
     <span class="cell month"
       v-for="month in months"

diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
@@ -5,12 +5,20 @@
       <span
         @click="isRtl ? nextDecade() : previousDecade()"
         class="prev"
-        :class="{'disabled': isLeftNavDisabled}">&lt;</span>
+        :class="{'disabled': isLeftNavDisabled}">
+          <slot name="prevIntervalBtn">
+            <span class="default">&lt;</span>
+          </slot>
+      </span>
       <span>{{ getPageDecade }}</span>
       <span
         @click="isRtl ? previousDecade() : nextDecade()"
         class="next"
-        :class="{'disabled': isRightNavDisabled}">&gt;</span>
+        :class="{'disabled': isRightNavDisabled}">
+          <slot name="nextIntervalBtn">
+            <span class="default">&gt;</span>
+          </slot>
+      </span>
     </header>
     <span
       class="cell year"

diff --git a/src/styles/style.styl b/src/styles/style.styl
@@ -23,25 +23,29 @@
 
         .prev
         .next
+            max-height 40px
             width (100/7)%
             float left
-            text-indent -10000px
             position relative
-            &:after
-                content ''
-                position absolute
-                left 50%
-                top 50%
-                transform translateX(-50%) translateY(-50%)
-                border 6px solid transparent
+            .default
+              text-indent -10000px
+              &:after
+                  content ''
+                  position absolute
+                  left 50%
+                  top 50%
+                  transform translateX(-50%) translateY(-50%)
+                  border 6px solid transparent
 
         .prev
+          .default
             &:after
                 border-right 10px solid #000
                 margin-left -5px
             &.disabled:after
                 border-right 10px solid #ddd
         .next
+          .default
             &:after
                 border-left 10px solid #000
                 margin-left 5px