如何通过为 Vuetify v3.4.0 添加日期选择按钮来获取日期键盘输入值？

问：

我尝试使用 Vuetify v3.4.0 版本获取键盘输入值。但是当我将日期选择器输入从模式“日历”更改为“键盘”时，我看不到任何选择按钮。

当我自己创建此键并输入键盘输入值时，我输入的值在 this.input 变量中显示为 null。

代码如下：

DateInput.vue：

<template>
  <div>
    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ props }">
        <v-text-field
          v-bind="props"
          :modelValue="dateFormatted"
          variant="outlined"
          append-inner-icon="mdi-calendar"
        ></v-text-field>
      </template>
      <v-locale-provider locale="en">
        <v-date-picker
          color="primary"
          :input-mode="inputMode"
          variant="outlined"
          :modelValue="getDate"
          @update:modelValue="updateDate"
          cancel-text="Cancel"
          ok-text="Choose"
        ></v-date-picker>
<!--         <v-btn @click="selectDate">
          Select
        </v-btn> -->
      </v-locale-provider>
    </v-menu>
  </div>
</template>

<script>
// import { toRaw } from 'vue';

export default {
  props: {
    inputMode: {
      type: String,
      default() {
        return "calendar"
      },
    },
    /**
     * Date on ISO format to be edited.
     * @model
     */
    value: {
      type: String,
      default() {
        return "2023-10-10"
      },
    },
  },
  watch: {
    value: {
      handler(val) {
        this.input = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      menu: false,
      input: null,
    };
  },
  computed: {
    // selectDate() {
    //   alert(this.input);
    // },
    dateFormatted() {
      const date = this.input ? new Date(this.input) : new Date();
      let month = 1 + date.getMonth();
      if (month < 10) {
        month = `0${month}`;
      }
      let day = date.getDate();
      if (day < 10) {
        day = `0${day}`;
      }
      return `${date.getFullYear()}-${month}-${day}`;
    },
    getDate() {
      /**
       * Return ISO 8601
       */
      let date = this.input ? new Date(this.input) : new Date();
      return date;
    },
  },
  methods: {
    updateDate(val) {
      this.menu = false;
      this.input = val
      console.error(val)
    },
  },
};
</script>

应用.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="6">
        <date-input 
          input-mode="keyboard"
        >
        </date-input>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import DateInput from './components/DateInput.vue'

export default {
  components: {
    DateInput
  }
}
</script>

这是 codesanbox url。