javascriptvuejs3primevue

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


I would like to ask if anyone has used the v3 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://v3.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>

Solution

  • 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!