如何使v-text-field(type="datetime-local")的分钟选择器按15分钟间隔显示

原生的datetime-local输入框本身不支持直接限定下拉选项的分钟值，Vuetify的v-text-field只是封装了原生组件，所以step="900"只能控制箭头步长，没法修改下拉列表的可选值。这里给你两个可行的解决办法：

方法一：用v-menu自定义时间选择器（推荐） #

直接放弃原生下拉，用Vuetify的v-menu搭配日期选择器和时间选择器，完全控制分钟选项：

<template>
  <v-menu
    v-model="menuOpen"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="auto"
  >
    <template v-slot:activator="{ props }">
      <v-text-field
        v-model="selectedDatetime"
        label="选择日期时间"
        readonly
        v-bind="props"
      ></v-text-field>
    </template>
    <v-card>
      <v-date-picker
        v-model="selectedDate"
        @input="menuOpen = true"
      ></v-date-picker>
      <v-time-picker
        v-model="selectedTime"
        minutes-step="15"
        @input="updateDatetime"
      ></v-time-picker>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn text @click="menuOpen = false">取消</v-btn>
        <v-btn text @click="menuOpen = false; updateDatetime">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      menuOpen: false,
      selectedDatetime: new Date().toISOString().slice(0, 16),
      selectedDate: new Date().toISOString().slice(0, 10),
      selectedTime: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
  },
  methods: {
    updateDatetime() {
      const dateTimeStr = `${this.selectedDate}T${this.selectedTime}`;
      this.selectedDatetime = new Date(dateTimeStr).toISOString().slice(0, 16);
    }
  }
};
</script>

通过minutes-step="15"直接让时间选择器只显示00、15、30、45的分钟选项，完全符合需求。

方法二：监听输入强制修正分钟值 #

如果一定要保留原生datetime-local的样式，可以监听输入事件，把用户选择的分钟自动修正到最近的15分钟间隔：

<template>
  <v-text-field
    type="datetime-local"
    v-model="selectedDatetime"
    @input="fixMinutes"
    step="900"
  ></v-text-field>
</template>

<script>
export default {
  data() {
    return {
      selectedDatetime: new Date().toISOString().slice(0, 16)
    };
  },
  methods: {
    fixMinutes() {
      if (!this.selectedDatetime) return;
      const date = new Date(this.selectedDatetime);
      const minutes = date.getMinutes();
      // 把分钟修正到最近的15倍数
      const roundedMinutes = Math.round(minutes / 15) * 15;
      date.setMinutes(roundedMinutes);
      // 转换为datetime-local要求的格式
      this.selectedDatetime = date.toISOString().slice(0, 16);
    }
  }
};
</script>

这个方案的缺点是原生下拉仍会显示所有分钟，但用户选择后值会被自动修正，适合不想修改组件结构的场景。

注意点 #

• 方法一的自定义菜单体验更友好，完全可控，优先推荐；
• 不管用哪种方法，都要保证绑定的日期时间格式为YYYY-MM-DDTHH:mm，符合datetime-local的输入要求。

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