Primevue calendar can you set the minute time every 30 minutes?

209 views Asked by At

I would like to ask if anyone has used the primevue library, which has a component called calendar, which allows you to set the date and also the time... my specific query goes directly to the time... yes, it can be set every 30 minutes in the part of the minutes, that is, you can select 10:30:30,11:00:00,11:30:00 etc.

This is the component I'm talking about: library link: https://primevue.org/calendar/#format

attached image:enter image description here

     <template>
    <div class="card flex flex-wrap gap-3 p-fluid">
        <div class="flex-auto">
            <label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
            <Calendar id="calendar-timeonly" v-model="time" timeOnly />
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";

const datetime12h = ref();
const datetime24h = ref();
const time = ref();
</script>
1

There are 1 answers

1
0stone0 On BEST ANSWER

If you press the 'API' on the top on the documentation page, you'll see the following prop for the <Calendar />:

stepMinute

Minutes to change per step.

So set that to 30 to make the time selector only show 0, 30, etc!