Vue中如何关闭type="datetime-local"类型的选择器？

浏览器原生的datetime-local输入框没有提供直接关闭选择器的API，但可以通过让输入框失去焦点（调用blur()方法）来触发选择器关闭，结合change事件就能实现需求。

选项式API（Vue2/Vue3兼容写法） #

<template>
  <input 
    type="datetime-local" 
    v-model="selectedDatetime"
    @change="closePicker"
  >
</template>

<script>
export default {
  data() {
    return {
      selectedDatetime: ''
    }
  },
  methods: {
    closePicker(event) {
      // 触发输入框失焦，强制关闭选择器
      event.target.blur()
    }
  }
}
</script>

组合式API（Vue3） #

<template>
  <input 
    type="datetime-local" 
    v-model="selectedDatetime"
    @change="closePicker"
  >
</template>

<script setup>
import { ref } from 'vue'
const selectedDatetime = ref('')

const closePicker = (event) => {
  event.target.blur()
}
</script>

补充说明 #

• change事件会在用户完成选择（点击选择器确认按钮或选定日期时间后）触发，此时调用blur()让输入框失焦，浏览器会自动关闭原生选择器。
• 部分浏览器可能在change触发时已自动关闭选择器，但这个方法能保证在所有主流浏览器中生效。
• 如果用户手动输入日期时间而非通过选择器选择，change事件同样会在值确认后触发，此时失焦也符合“完成输入后关闭”的预期。

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