如何将v-calendar DatePicker默认小时配置为00:00？

可以通过以下几种方式实现需求：

方法1：使用default-time属性（推荐） #

v-calendar 3.x的DatePicker组件内置了default-time属性，直接指定默认时间为"00:00:00"，选择日期后时间部分会自动设为00:00。修改后的组件代码如下：

<DatePicker 
  v-model="date" 
  :mode="mode" 
  :locale="locale" 
  is24hr 
  :model-config="modelConfig" 
  @dayclick="pickDate" 
  @input="pickDate" 
  ref="calendar" 
  @daykeydown="onKeydown" 
  :popover="popoverOptions"
  default-time="00:00:00"
>
</DatePicker>

方法2：在选择事件中手动修正时间 #

如果default-time在你的业务场景中不生效，可以在pickDate方法里手动重置选中日期的时间部分：

function pickDate(selectedDate) {
  if (mode === 'datetime') {
    const targetDate = new Date(selectedDate);
    targetDate.setHours(0, 0, 0, 0);
    // 根据你的v-model绑定逻辑更新值
    date = targetDate;
  }
}

方法3：通过model-config强制设置时间 #

若你使用了自定义的model-config，可以在解析环节强制将时间设为00:00：

const modelConfig = {
  type: 'date',
  parse: (value) => {
    const parsedDate = new Date(value);
    parsedDate.setHours(0, 0, 0, 0);
    return parsedDate;
  },
  format: (date) => {
    // 按需求格式化日期时间，示例为ISO格式的前16位（YYYY-MM-DDTHH:mm）
    return date.toISOString().slice(0, 16);
  }
};

注意事项 #

确保已开启is24hr属性，这样时间会以24小时制显示00:00，而非12小时制的12:00 AM。

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