PrimeVue 日历默认时间

Question

            <Calendar showIcon iconDisplay="input"
                      @update:modelValue="(value) => submitCalendar(value, field.id)"
                      v-model="field.value[0]" showTime hourFormat="24">
              <template #inputicon="{ clickCallback }">
                <svg class="cursor-pointer" @click="clickCallback" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#8F95B2" d="M7 11h2v2H7v-2Zm0 4h2v2H7v-2Zm4-4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm4-4h2v2h-2v-2Zm0 4h2v2h-2v-2Z"/><path fill="#8F95B2" d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2ZM19 8l.001 12H5V8h14Z"/></svg>
              </template>
            </Calendar>

field.value[0] = 2024 年 10 月 15 日 11:48。当我从后端获取日期时，它显示在输入中，但未在日历中选择。我可以使用像 defaultTime 这样的东西吗？

Answer 1

首先，您需要将值定义为日期。然后该值将显示为已选中。您可以在下面找到示例代码。

<template>
  <div class="card flex justify-content-center">
    <Calendar v-model="date" dateFormat="dd/mm/yy" showTime/>
  </div>
</template>

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

const date = new Date();
</script>