如何修改PrimeVue Calendar组件的默认时间为00:00

有两种实用方式可以实现需求，根据你的场景选择即可：

方式一：使用组件内置的default-time属性 #

直接给Calendar组件添加default-time属性（Vue中采用短横线分隔的kebab-case格式），指定默认时间为00:00:00，用户选择日期时，时间部分会自动设为零点。

修改后的组件代码：

<Calendar
  v-model="filter.started_at"
  dateFormat="dd.mm.yy"
  showIcon
  iconDisplay="input"
  placeholder="date"
  class="tournaments-filter__field"
  showButtonBar
  show-time
  default-time="00:00:00"
/>

方式二：初始化绑定变量为当天00:00 #

如果需要组件渲染时就默认选中当天的零点时间，可在Vue的初始化逻辑中设置filter.started_at的值：

• 若使用Composition API：

import { ref } from 'vue';

const filter = ref({
  started_at: new Date(new Date().setHours(0, 0, 0, 0))
});

• 若使用Options API：

data() {
  return {
    filter: {
      started_at: new Date(new Date().setHours(0, 0, 0, 0))
    }
  }
}

补充：强制时间为00:00（可选） #

如果需要确保无论用户手动修改时间与否，最终绑定值的时间部分都是00:00，可以结合@update:model-value事件修正：

<Calendar
  v-model="filter.started_at"
  dateFormat="dd.mm.yy"
  showIcon
  iconDisplay="input"
  placeholder="date"
  class="tournaments-filter__field"
  showButtonBar
  show-time
  @update:model-value="(val) => {
    if (val) {
      val.setHours(0, 0, 0, 0);
      filter.started_at = val;
    }
  }"
/>

内容的提问来源于stack exchange，提问作者VTsM