primevue icon indicating copy to clipboard operation
primevue copied to clipboard

Calendar: Button Bar Slots

Open account00001 opened this issue 2 years ago • 0 comments

Describe the feature you would like to see added

The current button bar leaves some to be desired. image

It'd be great to expose slots so I can add my own buttons to it like so image 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."

account00001 avatar Aug 22 '22 02:08 account00001