primevue
primevue copied to clipboard
Calendar: Button Bar Slots
Describe the feature you would like to see added
The current button bar leaves some to be desired.
It'd be great to expose slots so I can add my own buttons to it like so
Or even replace the existing buttons all together.
Is your feature request related to a problem?
No.
Describe the solution you'd like
Something like...
In Calendar.vue
<div class="p-datepicker-buttonbar" v-if="showButtonBar">
<slot name="buttons">
<CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text"
@keydown="onContainerButtonKeydown" />
<CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text"
@keydown="onContainerButtonKeydown" />
</slot>
</div>
On use:
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate">
<template #buttons>
<CalendarButton type="button" :label="minLabel" @click="onMinButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
<CalendarButton type="button" :label="maxLabel" @click="onMaxButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown"/>
</template>
</Calendar>
Describe alternatives you have considered
Alternative would be to have a separate button outside the calendar which breaks the flow.
Additional context
A classic example would be the minDate and maxDate, adding buttons to jump to those instead of just "Today."