Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Provided slots for calendar rotation buttons content. #731

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Provided slots for calendar rotation buttons content. #731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
29 changes: 29 additions & 0 deletions example/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
6 changes: 6 additions & 0 deletions src/components/Datepicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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 -->
Expand All @@ -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>
Expand Down
12 changes: 10 additions & 2 deletions src/components/PickerDay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 10 additions & 2 deletions src/components/PickerMonth.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 10 additions & 2 deletions src/components/PickerYear.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
20 changes: 12 additions & 8 deletions src/styles/style.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down